feat: option lazy loading

src/ui/components/dockerlogs.tsx

@@ -18,10 +18,7 @@ export default function DockerLogs () {
 
   useEffect(() => {
     listContainers()
-
-    // renew state every 10 seconds
     const interval = setInterval(listContainers, 10000)
-
     return () => {
       clearInterval(interval)
     }
@@ -37,7 +34,7 @@ export default function DockerLogs () {
           <Text>Status: {container.Status}</Text>
           <Text>State: {container.State}</Text>
           <Text>Created: {container.Created}</Text>
-          {/* <Text>Ports: {container.Ports.map((port:any) => `${port.PrivatePort}:${port.PublicPort}`).join(', ')}</Text> */}
+          <Text>Ports: {container.Ports.map((port:any) => `${port.PrivatePort}:${port.PublicPort}`).join(', ')}</Text>
           <Newline/>
         </Box>
       ))}

src/ui/components/selectInput.tsx

@@ -37,7 +37,6 @@ export default function Select ({ setNetworkType }: any) {
   return (
     <>
       <Box width={50} height={16} marginBottom={2} borderStyle='single' borderColor="#FFFFFF" flexDirection='column'>
-
         <Text color={'white'} bold>Choose a type of network to deploy:</Text>
         <Box marginTop={1}>
           <SelectInput items={items} onHighlight={selectChain} onSelect={handleCommand} />

src/ui/components/terminal.tsx

@@ -1,28 +1,56 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useMemo } from 'react'
 import { Text, Box } from 'ink'
 import CommandContext from '../services/commandContext'
+
 interface TerminalProps {
   type: string
 }
+
 export default function Terminal (props: TerminalProps) {
   const commandContext = new CommandContext()
-  const [output, setOutput] = useState('')
-  useEffect(() => {
+  const [output, setOutput] = useState<string>('')
+  const [loading, setLoading] = useState(false)
+
+  useMemo(() => {
+    let isCancelled = false
+
     const fetchCommandHelp = async () => {
-      const result = await commandContext.getCommandHelp(props.type)
-      setOutput(result)
+      setLoading(true)
+
+      try {
+        const result = await commandContext.getCommandHelp(props.type)
+        if (!isCancelled) {
+          setOutput(result)
+        }
+      } catch (error) {
+        console.error(`Error fetching command help: ${error}`)
+      }
+
+      setLoading(false)
     }
-    fetchCommandHelp().catch((err) => {
-      console.log(err)
+
+    setOutput('')
+    fetchCommandHelp().catch((error) => {
+      console.error(`Error fetching command help: ${error}`)
     })
+
+    return () => {
+      isCancelled = true
+    }
   }, [props.type])
 
   return (
-    <>
+    <Box width={125} height={16} marginBottom={2} paddingBottom={2} flexDirection="column">
       <Text>Command output:</Text>
       <Box marginTop={1}>
-        <Text wrap="truncate-end">{output}</Text>
+        {loading ? (
+          <></>
+        ) : (
+          <Text wrap="truncate-end">
+            {output}
+          </Text>
+        )}
       </Box>
-    </>
+    </Box>
   )
 }

src/ui/services/commandContext.ts

@@ -2,6 +2,10 @@ import { exec, execSync } from 'child_process'
 import { ItemProps } from '../models/type/ui.type'
 
 export default class CommandContext {
+  static getCommandHelp () {
+    throw new Error('Method not implemented.')
+  }
+
   public getCommandContext (command: string): Promise<(string | undefined)[]> {
     return new Promise((resolve, reject) => {
       exec(`${command} --help`, (error, stdout) => {
@@ -16,8 +20,12 @@ export default class CommandContext {
         const commandsRegex = this.makeRegex(command)
         if (match) {
           const commandsText = match[1]
-          const commands = commandsText.match(commandsRegex)
-            ?.map((match) => `${command} ${match.trim().split(/\s+/).pop()}`) ?? []
+          const commands =
+            commandsText
+              .match(commandsRegex)
+              ?.map(
+                (match) => `${command} ${match.trim().split(/\s+/).pop()}`,
+              ) ?? []
           resolve(commands)
         } else {
           resolve([])

src/ui/views/app.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, lazy, Suspense } from 'react'
 import { Box, Text, useApp, useInput, useStdout } from 'ink'
 import Logo from '../components/logo'
 import DockerLogs from '../components/dockerlogs'
-import Option from '../components/option'
 import Select from '../components/selectInput'
 
+const Terminal = lazy(() => import('../components/terminal'))
+
 export default function App () {
   const { exit } = useApp()
 
@@ -53,12 +54,14 @@ export default function App () {
 
   return (
     <Box flexDirection='row' width={width} height={height}>
-      <Box width="45%" borderStyle='single' flexDirection='column' borderColor={'white'}>
-        <Option networkType={networkType} />
-        <Box height="5%" marginTop={30} paddingTop={1} flexDirection='row' justifyContent='space-between'>
-          <Text color={'yellow'}>Press q to exit</Text>
+      <Suspense fallback={<Text>Loading ....</Text>}>
+        <Box width="45%" borderStyle='single' flexDirection='column' borderColor={'white'}>
+          <Terminal type={networkType} />
+          <Box height="5%" marginTop={30} paddingTop={1} flexDirection='row' justifyContent='space-between'>
+            <Text color={'yellow'}>Press q to exit</Text>
+          </Box>
         </Box>
-      </Box>
+      </Suspense>
       <Box width="55%" flexDirection='column'>
         <Box height="30%" flexDirection='row'>
           <Select setNetworkType={setNetworkType} />