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 />
      <GoabxButton type="secondary" leadingIcon="search" onClick={search}>
        Search case history
      </GoabxButton>

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>

<goabx-button type="secondary" leadingIcon="search" (onClick)="search()">
  Search case history
</goabx-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>