Back to all examples

Show a user progress when the time is unknown

ReactAngularWeb Components
const searchCMS = async (): Promise<Error | undefined> => {
    // Perform your API call here
    await new Promise((resolve) => setTimeout(resolve, 3000));
    return undefined;
  };

  const search = async () => {
    const uuid = TemporaryNotification.show("Searching case management system...", {
      type: "indeterminate",
      actionText: "Cancel",
      action: () => {
        TemporaryNotification.dismiss(uuid);
      },
    });

    const err = await searchCMS();
    if (err) {
      TemporaryNotification.show("Could not connect to case history", {
        type: "failure",
        duration: "medium",
        cancelUUID: uuid,
      });
    } else {
      TemporaryNotification.show("Search complete - 47 records found", {
        type: "success",
        duration: "medium",
        actionText: "View",
        action: () => {
          console.log("View search results clicked!");
        },
        cancelUUID: uuid,
      });
    }
  };
<GoabTemporaryNotificationCtrl />
      <GoabButton type="secondary" leadingIcon="search" onClick={search}>
        Search case history
      </GoabButton>

Display indeterminate progress for operations where completion time cannot be estimated, such as complex searches or external system queries.

When to use

Use this pattern when:

  • The operation duration cannot be predicted
  • You’re querying external systems with variable response times
  • Searching across multiple data sources
  • Users need to know something is happening but not a specific percentage

Considerations

  • Use type="indeterminate" for unknown duration operations
  • Always provide a cancel option
  • Show success or failure notification when complete
  • Include meaningful context in the notification message