Disable TextAnimation in static contexts

[shauns]

WHY are these changes introduced?

Disable loading bar animation in cloud environments and non-TTY contexts to improve CLI behavior in automated environments.

Without this, something like shopify app deploy <opts> &> log.txt will include lots of renders of the rainbow/hill graphic. With this, it's rendered once and not animated, making the log a lot easier to work with

---

WHAT is this pull request doing?

This PR disables the animated loading bar when running in cloud environments or non-TTY contexts. It:

1. Adds a new isStatic prop to the TextAnimation component
2. Modifies the LoadingBar component to detect cloud environments and non-TTY contexts
3. Passes the detection result to the TextAnimation component to disable animation when appropriate

How to test your changes?

1. Run a command with a loading bar in a regular terminal to verify animation still works
2. Redirect output to a file (e.g., command > output.txt) to test non-TTY behavior
3. If possible, test in a cloud environment to verify animation is disabled

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes

[shauns]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Disable TextAnimation in static contexts #5945 👈 (View in Graphite)
• Use renderSingleTask in app dev #5926
• Introduce SingleTask component #5925
• Add useExitOnCtrlC hook #5924
• Add LoadingBar UI component #5923
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

We detected some changes at packages/*/src and there are no updates in the .changeset.
If the changes are user-facing, run pnpm changeset add to track your changes and include them in the next release CHANGELOG.

Caution

DO NOT create changesets for features which you do not wish to be included in the public changelog of the next CLI release.

[gonzaloriestra]

How can I reproduce the problem in main? I'm trying with p shopify app deploy --force > output.txt, but I can't see the loading bar anywhere 🤔

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

packages/cli-kit/dist/private/node/ui/hooks/use-exit-on-ctrl-c.d.ts

/**
 * This hook will cause the process to exit when the user presses Ctrl+C.
 */
export declare function useExitOnCtrlC(): void;

packages/cli-kit/dist/private/node/ui/components/LoadingBar.d.ts

import React from 'react';
interface LoadingBarProps {
    title: string;
    noColor?: boolean;
}
declare const LoadingBar: ({ title, noColor }: React.PropsWithChildren<LoadingBarProps>) => JSX.Element;
export { LoadingBar };

packages/cli-kit/dist/private/node/ui/components/SingleTask.d.ts

import React from 'react';
interface SingleTaskProps {
    title: string;
    taskPromise: Promise<unknown>;
    noColor?: boolean;
}
declare const SingleTask: ({ taskPromise, title, noColor }: React.PropsWithChildren<SingleTaskProps>) => JSX.Element | null;
export { SingleTask };

Existing type declarations

packages/cli-kit/dist/public/node/ui.d.ts

@@ -330,6 +330,21 @@ interface RenderTasksOptions {
  * Installing dependencies ...
  */
 export declare function renderTasks<TContext>(tasks: Task<TContext>[], { renderOptions }?: RenderTasksOptions): Promise<TContext>;
+/**
+ * Awaits a single promise and displays a loading bar while it's in progress. The promise's result is returned.
+ * @param options - Configuration object
+ * @param options.title - The title to display with the loading bar
+ * @param options.taskPromise - The promise to track
+ * @param renderOptions - Optional render configuration
+ * @returns The result of the promise
+ * @example
+ * ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+ * Loading app ...
+ */
+export declare function renderSingleTask<T>({ title, taskPromise }: {
+    title: string;
+    taskPromise: Promise<T> | (() => Promise<T>);
+}, { renderOptions }?: RenderTasksOptions): Promise<T>;
 export interface RenderTextPromptOptions extends Omit<TextPromptProps, 'onSubmit'> {
     renderOptions?: RenderOptions;
 }

packages/cli-kit/dist/private/node/ui/components/TextAnimation.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 interface TextAnimationProps {
     text: string;
     maxWidth?: number;
+    isStatic?: boolean;
 }
 /**
  *  applies a rainbow animation to text.
  */
-declare const TextAnimation: React.MemoExoticComponent<({ text, maxWidth }: TextAnimationProps) => JSX.Element>;
+declare const TextAnimation: React.MemoExoticComponent<({ text, maxWidth, isStatic }: TextAnimationProps) => JSX.Element>;
 export { TextAnimation };
\ No newline at end of file