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>

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

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

  const err = await this.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,
    });
  }
}

<goab-temporary-notification-ctrl></goab-temporary-notification-ctrl>

<goab-button type="secondary" leadingIcon="search" (onClick)="search()">
  Search case history
</goab-button>

const searchBtn = document.getElementById("search-btn");
let currentUuid = null;

function showNotification(message, opts = {}) {
  const uuid = crypto.randomUUID();
  document.body.dispatchEvent(
    new CustomEvent("msg", {
      composed: true,
      bubbles: true,
      detail: {
        action: "goa:temp-notification",
        data: { message, uuid, type: "basic", ...opts },
      },
    }),
  );
  return uuid;
}

function dismissNotification(uuid) {
  document.body.dispatchEvent(
    new CustomEvent("msg", {
      composed: true,
      bubbles: true,
      detail: {
        action: "goa:temp-notification:dismiss",
        data: uuid,
      },
    }),
  );
}

async function searchCMS() {
  await new Promise((resolve) => setTimeout(resolve, 3000));
}

async function search() {
  currentUuid = showNotification("Searching case management system...", {
    type: "indeterminate",
    actionText: "Cancel",
    action: () => {
      dismissNotification(currentUuid);
    },
  });

  try {
    await searchCMS();
    showNotification("Search complete - 47 records found", {
      type: "success",
      duration: "medium",
      actionText: "View",
      action: () => {
        console.log("View search results clicked!");
      },
      cancelUUID: currentUuid,
    });
  } catch (err) {
    showNotification("Could not connect to case history", {
      type: "failure",
      duration: "medium",
      cancelUUID: currentUuid,
    });
  }
}

searchBtn.addEventListener("_click", search);

<goa-temp-notification-ctrl></goa-temp-notification-ctrl>

<goa-button version="2" id="search-btn" type="secondary" leadingicon="search">
  Search case history
</goa-button>