fix: Finally found a fix to the memory issues. It was because of backpressure from too many updates due to the spinner updating on every log. Updated UI with new codify ink-form version

Author: kevinwang5658

package-lock.json

@@ -4,7 +4,7 @@
     "codify": "./bin/run.js"
   },
   "dependencies": {
-    "@codifycli/ink-form": "0.0.10",
+    "@codifycli/ink-form": "0.0.11",
     "ink-select-input": "^6.0.0",
     "@homebridge/node-pty-prebuilt-multiarch": "^0.12.0-beta.5",
     "@inkjs/ui": "^2",

package.json

@@ -122,8 +122,9 @@ export class ImportOrchestrator {
     const importedConfigs: ResourceConfig[] = [];
     const errors: string[] = [];
 
+    ctx.subprocessStarted(SubProcessName.IMPORT_RESOURCE);
+
     await Promise.all(resources.map(async (resource) => {
-      ctx.subprocessStarted(SubProcessName.IMPORT_RESOURCE, resource.type);
 
       try {
         const response = await pluginManager.importResource(resource.toJson());
@@ -143,9 +144,10 @@ export class ImportOrchestrator {
         errors.push(error.message ?? error);
       }
 
-      ctx.subprocessFinished(SubProcessName.IMPORT_RESOURCE, resource.type);
     }))
 
+    ctx.subprocessFinished(SubProcessName.IMPORT_RESOURCE);
+
     return {
       result: importedConfigs,
       errors,
@@ -186,17 +188,13 @@ ${JSON.stringify(unsupportedTypeIds)}`);
   }
 
   private static async validate(typeIds: string[], project: Project, pluginManager: PluginManager, dependencyMap: DependencyMap): Promise<void> {
-    ctx.subprocessStarted(SubProcessName.VALIDATE)
-
     project.validateTypeIds(dependencyMap);
 
     const unsupportedTypeIds = typeIds.filter((type) => !dependencyMap.has(type));
     if (unsupportedTypeIds.length > 0) {
       throw new Error(`The following resources cannot be imported. No plugins found that support the following types:
 ${JSON.stringify(unsupportedTypeIds)}`);
     }
-
-    ctx.subprocessFinished(SubProcessName.VALIDATE)
   }
 
   private static async getImportParameters(reporter: Reporter, project: Project, resourceInfoList: ResourceInfo[]): Promise<Array<ResourceConfig>> {

src/orchestrators/import.ts

@@ -4,6 +4,7 @@ import chalk from 'chalk';
 import { Box, Static, Text } from 'ink';
 import SelectInput from 'ink-select-input';
 import { useAtom } from 'jotai';
+import { selectAtom } from 'jotai/utils';
 import { EventEmitter } from 'node:events';
 import React, { useLayoutEffect, useState } from 'react';
 
@@ -26,12 +27,16 @@ export function DefaultComponent(props: {
   const { emitter } = props
   const [disableSudoPrompt, setDisableSudoPrompt] = useState(false);
   const [{ status: renderStatus, data: renderData }] = useAtom(store.renderState);
+  const logTriggeredSpinner = selectAtom(store.progressState, (progress) => progress?.logTriggeredSpinner ?? false);
 
   // Use layoutEffect runs before the first render, whereas useEffect runs after
   useLayoutEffect(() => {
     const logListener = (log: string) => {
       console.log(chalk.cyan(log));
-      spinnerEmitter.emit('data');
+
+      if (logTriggeredSpinner) {
+        spinnerEmitter.emit('data');
+      }
     };
 
     emitter.on(RenderEvent.LOG, logListener);

src/ui/components/default-component.tsx

@@ -1,4 +1,4 @@
-import { StatusMessage } from '@inkjs/ui';
+import { StatusMessage, Spinner as AutomatedSpinner } from '@inkjs/ui';
 import { Box } from 'ink';
 import EventEmitter from 'node:events';
 import React from 'react';
@@ -16,6 +16,7 @@ export interface ProgressState {
   name: string,
   label: string;
   status: ProgressStatus;
+  logTriggeredSpinner: boolean;
   subProgresses: Array<{
     name: string,
     label: string;
@@ -35,22 +36,26 @@ export function ProgressDisplay(
     return;
   }
 
-  const { label, status, subProgresses } = progress;
+  const { label, status, subProgresses, logTriggeredSpinner } = progress;
 
   return <Box flexDirection="column">
     {
       status === ProgressStatus.IN_PROGRESS
-        ? <Spinner type="circleHalves" eventEmitter={props.emitter} eventType={props.eventType} label={label}/>
+        ? (logTriggeredSpinner
+          ? <Spinner eventEmitter={props.emitter} eventType={props.eventType} label={label} type="circleHalves"/>
+          : <AutomatedSpinner label={label} type="circleHalves" />
+        )
         : <StatusMessage variant="success">{label}</StatusMessage>
     }
     <Box flexDirection="column" marginLeft={2}>
-      <SubProgressDisplay emitter={props.emitter} eventType={props.eventType} subProgresses={subProgresses}/>
+      <SubProgressDisplay emitter={props.emitter} eventType={props.eventType} subProgresses={subProgresses} logTriggeredSpinner={logTriggeredSpinner}/>
     </Box>
   </Box>
 }
 
 export function SubProgressDisplay(
   props: {
+    logTriggeredSpinner: boolean;
     subProgresses: ProgressState['subProgresses'],
     emitter: EventEmitter,
     eventType: string,
@@ -66,7 +71,10 @@ export function SubProgressDisplay(
       .slice(Math.max(0, subProgresses.length - 5), subProgresses.length)
       .map((s, idx) =>
         s.status === ProgressStatus.IN_PROGRESS
-          ? <Spinner eventEmitter={emitter} eventType={eventType} key={idx} label={s.label} type="circleHalves"/>
+          ? (props.logTriggeredSpinner
+            ? <Spinner eventEmitter={emitter} eventType={eventType} key={idx} label={s.label} type="circleHalves"/>
+              : <AutomatedSpinner key={idx} label={s.label} type="circleHalves" />
+          )
           : <StatusMessage key={idx} variant="success">{s.label}</StatusMessage>
       )
   }</>

src/ui/components/progress/progress-display.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { Plan } from '../../entities/plan.js';
 import { ResourceConfig } from '../../entities/resource-config.js';
 import { ResourceInfo } from '../../entities/resource-info.js';
-import { Event, ProcessName, SubProcessName, ctx } from '../../events/context.js';
+import { ctx, Event, ProcessName, SubProcessName } from '../../events/context.js';
 import { ImportResult } from '../../orchestrators/import.js';
 import { FileModificationResult } from '../../utils/file-modification-calculator.js';
 import { SudoUtils } from '../../utils/sudo.js';
@@ -192,6 +192,7 @@ export class DefaultReporter implements Reporter {
       name,
       status: ProgressStatus.IN_PROGRESS,
       subProgresses: [],
+      logTriggeredSpinner: name === ProcessName.APPLY || name === ProcessName.DESTROY,
     };
 
     this.log(`${label} started`)
@@ -212,7 +213,7 @@ export class DefaultReporter implements Reporter {
 
     this.progressState?.subProgresses?.push({
       label,
-      name: name + additionalName,
+      name: name + (additionalName ?? ''),
       status: ProgressStatus.IN_PROGRESS,
     });
     store.set(store.progressState, structuredClone(this.progressState));
@@ -223,7 +224,7 @@ export class DefaultReporter implements Reporter {
 
     const subProgress = this.progressState
       ?.subProgresses
-      ?.find((p) => p.name === name + additionalName);
+      ?.find((p) => p.name === name + (additionalName ?? ''));
 
     if (!subProgress) {
       return;