feat: lazy loading in command change (#92)

* feat: option lazy loading

* fix: debounce in select input

---------

Co-authored-by: kidneyweak <[email protected]>

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Text, Box } from 'ink'
 import SelectInput from 'ink-select-input'
 import CommandContext from '../services/commandContext'
+import { debounce } from '../../util'
 
 export default function Select ({ setNetworkType }: any) {
   const commandContext = new CommandContext()
@@ -18,9 +19,9 @@ export default function Select ({ setNetworkType }: any) {
     },
   ])
 
-  const selectChain = (item: any) => {
+  const selectChain = debounce((item: any) => {
     setNetworkType(item.value)
-  }
+  }, 350)
 
   const handleCommand = async (item: any) => {
     if (isCommandExecuting) return
@@ -37,7 +38,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

@@ -16,8 +16,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} />

src/util/utils.ts

@@ -1,4 +1,5 @@
 import format from 'string-format'
+import NodeJS from 'node:process'
 
 export interface Map {
   [key: string]: any
@@ -28,3 +29,13 @@ export function tarDateFormat (date: Date): string {
 export const randomFromArray = <T> (x: Array<T>) => x[Math.floor(Math.random() * x.length)]
 
 export const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+export const debounce = <T extends (...args: any[]) => any>(fn: T, delay = 500) => {
+  let timer: NodeJS.Timeout | null = null
+  return (...args: Parameters<T>): any => {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => fn(...args), delay)
+  }
+}