Show a user progress when the time is unknown
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