New loading indicator

[gonzaloriestra]

WHY are these changes introduced?

HackDays project: https://vault.shopify.io/hackdays/154/projects/24279-Shopify-CLI-UX-improvements

The CLI uses multiple spinner implementations with inconsistent visuals and behavior.

WHAT is this pull request doing?

Replaces task and app dev spinners with a shared Shopify-branded loading indicator.

demo.mp4

How to test your changes?

• pnpm i -g @shopify/cli@0.0.0-snapshot-20260811121607
• shopify app init
• shopify app dev

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes
• I've considered analytics changes to measure impact
• The change is user-facing — I've identified the correct bump type (patch for bug fixes · minor for new features · major for breaking changes) and added a changeset with pnpm changeset add

[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/components/LoadingIndicator.d.ts

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

Existing type declarations

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

@@ -322,9 +322,9 @@ export interface RenderSingleTaskOptions<T> {
     renderOptions?: RenderOptions;
 }
 /**
- * Awaits a single task and displays a loading bar while it's in progress. The task's result is returned.
+ * Awaits a single task and displays a loading indicator while it's in progress. The task's result is returned.
  * @param options - Configuration object
- * @param options.title - The initial title to display with the loading bar
+ * @param options.title - The initial title to display with the loading indicator
  * @param options.task - The async task to execute. Receives an updateStatus callback to change the displayed title.
  * @param options.renderOptions - Optional render configuration
  * @returns The result of the task

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

@@ -1,4 +1,5 @@
 export { ConcurrentOutput, ConcurrentOutputContext, useConcurrentOutputContext, } from '../../../private/node/ui/components/ConcurrentOutput.js';
 export { Alert } from '../../../private/node/ui/components/Alert.js';
 export { Link } from '../../../private/node/ui/components/Link.js';
+export { LoadingIndicator } from '../../../private/node/ui/components/LoadingIndicator.js';
 export { TabularData } from '../../../private/node/ui/components/TabularData.js';
\ No newline at end of file

[dmerand]

/snapit

[github-actions]

🫰✨ Thanks @dmerand! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

pnpm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20260828140545

Caution

After installing, validate the version by running shopify version in your terminal.
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.