fix: Fixed weird memory problem with using spinner and status message from @inkjs/ui

Author: kevinwang5658

package.json

@@ -15,6 +15,7 @@
     "ajv": "^8.12.0",
     "ajv-formats": "^3.0.1",
     "chalk": "^5.3.0",
+    "cli-spinners": "^3.4.0",
     "codify-schemas": "1.0.86-beta11",
     "cors": "^2.8.5",
     "debug": "^4.3.4",
@@ -27,7 +28,7 @@
     "ink-select-input": "^6.0.0",
     "jju": "^1.4.0",
     "jose": "^6.1.0",
-    "jotai": "^2.11.1",
+    "jotai": "^2.18.0",
     "js-yaml": "^4.1.0",
     "js-yaml-source-map": "^0.2.2",
     "json-source-map": "^0.6.1",

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

@@ -1,9 +1,9 @@
-import { Spinner as AutomatedSpinner, StatusMessage } from '@inkjs/ui';
-import { Box } from 'ink';
+import { Box, Text } from 'ink';
 import { useAtom } from 'jotai';
 import React from 'react';
 
 import { store } from '../../store/index.js';
+import Spinner from './spinner.js';
 
 export enum ProgressStatus {
   IN_PROGRESS,
@@ -32,8 +32,8 @@ export function ProgressDisplay() {
   return <Box flexDirection="column">
     {
       status === ProgressStatus.IN_PROGRESS
-        ? <AutomatedSpinner label={label} type="dots" />
-        : <StatusMessage variant="success">{label}</StatusMessage>
+        ? <Spinner label={label} type="dots" />
+        : <Text><Text color='greenBright'>✔</Text> {label}</Text>
     }
     <Box flexDirection="column" marginLeft={2}>
       <SubProgressDisplay subProgresses={subProgresses}/>
@@ -56,8 +56,8 @@ export function SubProgressDisplay(
       .slice(Math.max(0, subProgresses.length - 5), subProgresses.length)
       .map((s, idx) =>
         s.status === ProgressStatus.IN_PROGRESS
-          ? <AutomatedSpinner key={idx} label={s.label} type="dots" />
-          : <StatusMessage key={idx} variant="success">{s.label}</StatusMessage>
+          ? <Spinner key={idx} label={s.label} type="dots" />
+          : <Text key={idx}><Text color='greenBright'>✔</Text> {s.label}</Text>
       )
   }</>
 }

src/ui/components/progress/spinner.tsx

@@ -1,52 +1,42 @@
 import type { SpinnerName } from 'cli-spinners';
 
 import spinners from 'cli-spinners';
-import { Box, Text } from 'ink';
-import EventEmitter from 'node:events';
-import React, { useLayoutEffect, useState } from 'react';
+import { Text } from 'ink';
+import React, { useEffect, useState } from 'react';
 
 type Props = {
-  /**
-   * Type of a spinner.
-   * See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available spinners.
-   *
-   * @default dots
-   */
-  type?: SpinnerName;
-
-  eventEmitter: EventEmitter;
-
-  eventType: string;
-
-  label?: string;
+    /**
+     * Type of a spinner.
+     * See [cli-spinners](https://github.com/sindresorhus/cli-spinners) for available spinners.
+     *
+     * @default dots
+     */
+    type?: SpinnerName;
+
+    label?: string;
 };
 
 /**
  * Spinner.
  */
-function Spinner({ eventEmitter, eventType, type = 'dots', label }: Props) {
-  const [frame, setFrame] = useState(0);
-  const spinner = spinners[type];
-
-  useLayoutEffect(() => {
-    const listener = () => {
-      setFrame(previousFrame => {
-        const isLastFrame = previousFrame === spinner.frames.length - 1;
-        return isLastFrame ? 0 : previousFrame + 1;
-      });
-    };
-
-    eventEmitter.on(eventType, listener);
-
-    return () => {
-      eventEmitter.removeListener(eventType, listener);
-    };
-  }, [])
-
-  return <Box gap={1}>
-    <Text color="blue">{spinner.frames[frame]}</Text>
-    {label && <Text>{label}</Text>}
-  </Box>
+function Spinner({ type = 'dots', label }: Props) {
+    const [frame, setFrame] = useState(0);
+    const spinner = spinners[type];
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame(previousFrame => {
+                const isLastFrame = previousFrame === spinner.frames.length - 1;
+                return isLastFrame ? 0 : previousFrame + 1;
+            });
+        }, spinner.interval);
+
+        return () => {
+            clearInterval(timer);
+        };
+    }, [spinner]);
+
+    return <Text>{spinner.frames[frame]} {label}</Text>;
 }
 
-export default Spinner;
+export default Spinner;

src/ui/reporters/default-reporter.tsx

@@ -314,7 +314,7 @@ export class DefaultReporter implements Reporter {
 
       // Validates that the password works
       if (SudoUtils.validate(passwordAttempt)) {
-        this.updateRenderState(RenderStatus.PROGRESS)
+        await this.displayProgress();
         return passwordAttempt;
       }