Use renderSingleTask in app dev

[shauns]

WHY are these changes introduced?

To improve the user experience during app loading in the dev command by providing visual feedback. The time between the developer pressing Enter to start the CLI, and getting some feedback that something is happening, is reduced by ~75%.

WHAT is this pull request doing?

Adds a loading indicator when initializing an app in the dev command. The app context and store context initialization is now wrapped in a renderSingleTask call that displays a "Loading app" message, providing better visual feedback to users during this process.

How to test your changes?

1. Run shopify app dev with any app
2. Verify that a "Loading app" indicator appears during initialization
3. Confirm that the app loads correctly after the loading task completes

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
• Existing analytics will cater for this addition
• PR includes analytics changes to measure impact

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
• Use renderSingleTask in app dev #5926 👈 (View in Graphite)
• 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.

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	78.1% (+0.06% 🔼)	12543/16060
🟡	Branches	72.29% (+0.09% 🔼)	6081/8412
🟡	Functions	78.24% (-0.05% 🔻)	3286/4200
🟡	Lines	78.54% (+0.07% 🔼)	11871/15115

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / app.test-data.ts	91.54% (-0.5% 🔻)	93.75%	81.4% (-1.16% 🔻)	90.91% (-0.53% 🔻)
🔴	... / dev.ts	11.57% (-7.09% 🔻)	12.33% (-1.37% 🔻)	12.12% (-12.88% 🔻)	12.39% (-6.81% 🔻)
🟢	... / handlers.ts	91.8% (-5.49% 🔻)	75% (+8.33% 🔼)	88.89% (-11.11% 🔻)	91.67% (-5.56% 🔻)
🔴	... / app-management-client.ts	46.56% (+0.36% 🔼)	41.43%	43.64% (-0.05% 🔻)	45.45% (+0.4% 🔼)
🟢	... / ExtensionServerProvider.tsx	81.82% (-3.9% 🔻)	0%	71.43% (-5.49% 🔻)	88.24% (-5.51% 🔻)

Test suite run success

2917 tests passing in 1263 suites.

Report generated by 🧪jest coverage report action from 6f927cf

[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/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 };

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;

Existing type declarations

packages/cli-kit/dist/private/node/api.d.ts

@@ -35,7 +35,7 @@ export declare function simpleRequestWithDebugLog<T extends {
 export declare function retryAwareRequest<T extends {
     headers: Headers;
     status: number;
-}>(requestOptions: RequestOptions<T>, errorHandler?: (error: unknown, requestId: string | undefined) => unknown, retryOptions?: {
+}>(requestOptions: RequestOptions<T>, errorHandler?: (error: unknown, requestId: string | undefined) => unknown, unauthorizedHandler?: () => Promise<void>, retryOptions?: {
     limitRetriesTo?: number;
     defaultDelayMs?: number;
     scheduleDelay: (fn: () => void, delay: number) => void;

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/public/node/api/app-dev.d.ts

@@ -1,25 +1,13 @@
-import { UnauthorizedHandler } from './graphql.js';
 import { Variables } from 'graphql-request';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 /**
+ * Executes an org-scoped GraphQL query against the App Management API.
+ * Uses typed documents.
+ *
  * @param query - GraphQL query to execute.
  * @param shopFqdn - The shop fqdn.
  * @param token - Partners token.
  * @param variables - GraphQL variables to pass to the query.
- * @param unauthorizedHandler - Unauthorized handler to use.
- */
-export interface AppDevRequestOptions<TResult, TVariables extends Variables> {
-    query: TypedDocumentNode<TResult, TVariables>;
-    shopFqdn: string;
-    token: string;
-    unauthorizedHandler: UnauthorizedHandler;
-    variables?: TVariables;
-}
-/**
- * Executes an org-scoped GraphQL query against the App Management API.
- * Uses typed documents.
- *
- * @param options - The options for the request.
  * @returns The response of the query of generic type <T>.
  */
-export declare function appDevRequestDoc<TResult, TVariables extends Variables>(options: AppDevRequestOptions<TResult, TVariables>): Promise<TResult>;
\ No newline at end of file
+export declare function appDevRequest<TResult, TVariables extends Variables>(query: TypedDocumentNode<TResult, TVariables>, shopFqdn: string, token: string, variables?: TVariables): Promise<TResult>;
\ No newline at end of file

packages/cli-kit/dist/public/node/api/app-management.d.ts

@@ -1,4 +1,4 @@
-import { CacheOptions, GraphQLResponse, UnauthorizedHandler } from './graphql.js';
+import { CacheOptions, GraphQLResponse } from './graphql.js';
 import { RequestModeInput } from '../http.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Variables } from 'graphql-request';
@@ -13,30 +13,17 @@ export interface RequestOptions {
     requestMode: RequestModeInput;
 }
 /**
+ * Executes an org-scoped GraphQL query against the App Management API. Uses typed documents.
+ *
  * @param orgId - The organization ID.
  * @param query - GraphQL query to execute.
  * @param token - Partners token.
  * @param variables - GraphQL variables to pass to the query.
  * @param cacheOptions - Cache options for the request. If not present, the request will not be cached.
  * @param requestOptions - Preferred behaviour for the request.
- * @param unauthorizedHandler - Optional handler for unauthorized requests.
- */
-export interface AppManagementRequestOptions<TResult, TVariables extends Variables> {
-    organizationId: string;
-    query: TypedDocumentNode<TResult, TVariables>;
-    token: string;
-    variables?: TVariables;
-    cacheOptions?: CacheOptions;
-    requestOptions?: RequestOptions;
-    unauthorizedHandler: UnauthorizedHandler;
-}
-/**
- * Executes an org-scoped GraphQL query against the App Management API. Uses typed documents.
- *
- * @param options - The options for the request.
  * @returns The response of the query of generic type <T>.
  */
-export declare function appManagementRequestDoc<TResult, TVariables extends Variables>(options: AppManagementRequestOptions<TResult, TVariables>): Promise<TResult>;
+export declare function appManagementRequestDoc<TResult, TVariables extends Variables>(orgId: string, query: TypedDocumentNode<TResult, TVariables>, token: string, variables?: TVariables, cacheOptions?: CacheOptions, requestOptions?: RequestOptions): Promise<TResult>;
 /**
  * Sets the next deprecation date from [GraphQL response extensions](https://www.apollographql.com/docs/resources/graphql-glossary/#extensions)
  * if  objects contain a  (ISO 8601-formatted string).

packages/cli-kit/dist/public/node/api/business-platform.d.ts

@@ -1,4 +1,4 @@
-import { CacheOptions, GraphQLVariables, UnauthorizedHandler } from './graphql.js';
+import { CacheOptions, Exact, GraphQLVariables } from './graphql.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Variables } from 'graphql-request';
 /**
@@ -12,46 +12,34 @@ import { Variables } from 'graphql-request';
  */
 export declare function businessPlatformRequest<T>(query: string, token: string, variables?: GraphQLVariables, cacheOptions?: CacheOptions): Promise<T>;
 /**
+ * Executes a GraphQL query against the Business Platform Destinations API. Uses typed documents.
+ *
  * @param query - GraphQL query to execute.
  * @param token - Business Platform token.
  * @param variables - GraphQL variables to pass to the query.
  * @param cacheOptions - Cache options for the request. If not present, the request will not be cached.
- */
-export interface BusinessPlatformRequestOptions<TResult, TVariables extends Variables> {
-    query: TypedDocumentNode<TResult, TVariables>;
-    token: string;
-    variables?: TVariables;
-    cacheOptions?: CacheOptions;
-    unauthorizedHandler: UnauthorizedHandler;
-}
-/**
- * Executes a GraphQL query against the Business Platform Destinations API. Uses typed documents.
- *
- * @param options - The options for the request.
  * @returns The response of the query of generic type <TResult>.
  */
-export declare function businessPlatformRequestDoc<TResult, TVariables extends Variables>(options: BusinessPlatformRequestOptions<TResult, TVariables>): Promise<TResult>;
-export interface BusinessPlatformOrganizationsRequestNonTypedOptions {
-    query: string;
-    token: string;
-    organizationId: string;
-    unauthorizedHandler: UnauthorizedHandler;
-    variables?: GraphQLVariables;
-}
+export declare function businessPlatformRequestDoc<TResult, TVariables extends Variables>(query: TypedDocumentNode<TResult, TVariables>, token: string, variables?: TVariables, cacheOptions?: CacheOptions): Promise<TResult>;
 /**
  * Executes a GraphQL query against the Business Platform Organizations API.
  *
- * @param options - The options for the request.
+ * @param query - GraphQL query to execute.
+ * @param token - Business Platform token.
+ * @param organizationId - Organization ID as a numeric (non-GID) value.
+ * @param variables - GraphQL variables to pass to the query.
  * @returns The response of the query of generic type <T>.
  */
-export declare function businessPlatformOrganizationsRequest<T>(options: BusinessPlatformOrganizationsRequestNonTypedOptions): Promise<T>;
-export interface BusinessPlatformOrganizationsRequestOptions<TResult, TVariables extends Variables> extends BusinessPlatformRequestOptions<TResult, TVariables> {
-    organizationId: string;
-}
+export declare function businessPlatformOrganizationsRequest<T>(query: string, token: string, organizationId: string, variables?: GraphQLVariables): Promise<T>;
 /**
  * Executes a GraphQL query against the Business Platform Organizations API. Uses typed documents.
  *
- * @param options - The options for the request.
+ * @param query - GraphQL query to execute.
+ * @param token - Business Platform token.
+ * @param organizationId - Organization ID as a numeric value.
+ * @param variables - GraphQL variables to pass to the query.
  * @returns The response of the query of generic type <T>.
  */
-export declare function businessPlatformOrganizationsRequestDoc<TResult, TVariables extends Variables>(options: BusinessPlatformOrganizationsRequestOptions<TResult, TVariables>): Promise<TResult>;
\ No newline at end of file
+export declare function businessPlatformOrganizationsRequestDoc<TResult, TVariables extends Variables>(query: TypedDocumentNode<TResult, TVariables> | TypedDocumentNode<TResult, Exact<{
+    [key: string]: never;
+}>>, token: string, organizationId: string, variables?: TVariables): Promise<TResult>;
\ No newline at end of file

packages/cli-kit/dist/public/node/api/functions.d.ts

@@ -1,26 +1,13 @@
-import { UnauthorizedHandler } from './graphql.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Variables } from 'graphql-request';
 /**
+ * Executes a rate-limited GraphQL request against the App Management Functions API.
+ *
  * @param orgId - Organization identifier.
  * @param query - Typed GraphQL document node.
  * @param token - Authentication token.
  * @param appId - App identifier.
  * @param variables - Optional query variables.
- * @param unauthorizedHandler - Optional handler for unauthorized requests.
- */
-export interface FunctionsRequestOptions<TResult, TVariables extends Variables> {
-    organizationId: string;
-    query: TypedDocumentNode<TResult, TVariables>;
-    token: string;
-    appId: string;
-    unauthorizedHandler: UnauthorizedHandler;
-    variables?: TVariables;
-}
-/**
- * Executes a rate-limited GraphQL request against the App Management Functions API.
- *
- * @param options - Request options.
  * @returns Promise resolving to the typed query result.
  */
-export declare function functionsRequestDoc<TResult, TVariables extends Variables>(options: FunctionsRequestOptions<TResult, TVariables>): Promise<TResult>;
\ No newline at end of file
+export declare function functionsRequestDoc<TResult, TVariables extends Variables>(orgId: string, query: TypedDocumentNode<TResult, TVariables>, token: string, appId: string, variables?: TVariables): Promise<TResult>;
\ No newline at end of file

packages/cli-kit/dist/public/node/api/graphql.d.ts

@@ -17,14 +17,6 @@ export interface CacheOptions {
     cacheExtraKey?: string;
     cacheStore?: LocalStorage<ConfSchema>;
 }
-interface RefreshedTokenOnAuthorizedResponse {
-    token?: string;
-}
-export type RefreshTokenOnAuthorizedResponse = Promise<RefreshedTokenOnAuthorizedResponse>;
-export interface UnauthorizedHandler {
-    type: 'token_refresh';
-    handler: () => RefreshTokenOnAuthorizedResponse;
-}
 interface GraphQLRequestBaseOptions<TResult> {
     api: string;
     url: string;
@@ -39,7 +31,7 @@ interface GraphQLRequestBaseOptions<TResult> {
 export type GraphQLRequestOptions<T> = GraphQLRequestBaseOptions<T> & {
     query: RequestDocument;
     variables?: Variables;
-    unauthorizedHandler?: UnauthorizedHandler;
+    unauthorizedHandler?: () => Promise<void>;
     requestBehaviour?: RequestModeInput;
 };
 export type GraphQLRequestDocOptions<TResult, TVariables> = GraphQLRequestBaseOptions<TResult> & {
@@ -47,7 +39,7 @@ export type GraphQLRequestDocOptions<TResult, TVariables> = GraphQLRequestBaseOp
         [key: string]: never;
     }>>;
     variables?: TVariables;
-    unauthorizedHandler?: UnauthorizedHandler;
+    unauthorizedHandler?: () => Promise<void>;
     requestBehaviour?: RequestModeInput;
 };
 export interface GraphQLResponseOptions<T> {

packages/cli-kit/dist/public/node/api/partners.d.ts

@@ -1,4 +1,4 @@
-import { GraphQLVariables, GraphQLResponse, CacheOptions, UnauthorizedHandler } from './graphql.js';
+import { GraphQLVariables, GraphQLResponse, CacheOptions } from './graphql.js';
 import { RequestModeInput } from '../http.js';
 import { Variables } from 'graphql-request';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
@@ -10,10 +10,9 @@ import { TypedDocumentNode } from '@graphql-typed-document-node/core';
  * @param variables - GraphQL variables to pass to the query.
  * @param cacheOptions - Cache options.
  * @param preferredBehaviour - Preferred behaviour for the request.
- * @param unauthorizedHandler - Optional handler for unauthorized requests.
  * @returns The response of the query of generic type <T>.
  */
-export declare function partnersRequest<T>(query: string, token: string, variables?: GraphQLVariables, cacheOptions?: CacheOptions, preferredBehaviour?: RequestModeInput, unauthorizedHandler?: UnauthorizedHandler): Promise<T>;
+export declare function partnersRequest<T>(query: string, token: string, variables?: GraphQLVariables, cacheOptions?: CacheOptions, preferredBehaviour?: RequestModeInput): Promise<T>;
 export declare const generateFetchAppLogUrl: (cursor?: string, filters?: {
     status?: string;
     source?: string;
@@ -25,10 +24,9 @@ export declare const generateFetchAppLogUrl: (cursor?: string, filters?: {
  * @param token - Partners token.
  * @param variables - GraphQL variables to pass to the query.
  * @param preferredBehaviour - Preferred behaviour for the request.
- * @param unauthorizedHandler - Optional handler for unauthorized requests.
  * @returns The response of the query of generic type <TResult>.
  */
-export declare function partnersRequestDoc<TResult, TVariables extends Variables>(query: TypedDocumentNode<TResult, TVariables>, token: string, variables?: TVariables, preferredBehaviour?: RequestModeInput, unauthorizedHandler?: UnauthorizedHandler): Promise<TResult>;
+export declare function partnersRequestDoc<TResult, TVariables extends Variables>(query: TypedDocumentNode<TResult, TVariables>, token: string, variables?: TVariables, preferredBehaviour?: RequestModeInput): Promise<TResult>;
 /**
  * Sets the next deprecation date from [GraphQL response extensions](https://www.apollographql.com/docs/resources/graphql-glossary/#extensions)
  * if  objects contain a  (ISO 8601-formatted string).

packages/cli-kit/dist/public/node/api/webhooks.d.ts

@@ -1,21 +1,13 @@
-import { UnauthorizedHandler } from './graphql.js';
 import { Variables } from 'graphql-request';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-/**
- * Options for making requests to the Webhooks API.
- */
-export interface WebhooksRequestOptions<TResult, TVariables extends Variables> {
-    organizationId: string;
-    query: TypedDocumentNode<TResult, TVariables>;
-    token: string;
-    unauthorizedHandler: UnauthorizedHandler;
-    variables?: TVariables;
-}
 /**
  * Executes an org-scoped GraphQL query against the App Management API.
  * Uses typed documents.
  *
- * @param options - The options for the request.
+ * @param organizationId - Organization ID required to check permissions.
+ * @param query - GraphQL query to execute.
+ * @param token - Partners token.
+ * @param variables - GraphQL variables to pass to the query.
  * @returns The response of the query of generic type <T>.
  */
-export declare function webhooksRequestDoc<TResult, TVariables extends Variables>(options: WebhooksRequestOptions<TResult, TVariables>): Promise<TResult>;
\ No newline at end of file
+export declare function webhooksRequest<TResult, TVariables extends Variables>(organizationId: string, query: TypedDocumentNode<TResult, TVariables>, token: string, variables?: TVariables): Promise<TResult>;
\ No newline at end of file

[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/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 };

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;

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;
 }

[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/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 };

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;

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;
 }

[gonzaloriestra]

It doesn't work well when you have to authenticate:

Also, what about adding the renderSingleTask inside linkedAppContext so that all the commands benefit from this?