Function showSyncLoading

frontend/src/ts/controllers/page-controller.ts:176–228

({
  loadingOptions,
  totalDuration,
}: {
  loadingOptions: LoadingOptions[];
  totalDuration: number;
})

}

async function showSyncLoading({
  loadingOptions,
  totalDuration,
}: {
  loadingOptions: LoadingOptions[];
  totalDuration: number;
}): Promise<void> {
  PageLoading.page.element.show().setStyle({ opacity: "0" });
  await PageLoading.page.beforeShow({});

  const fillDivider = loadingOptions.length;
  const fillOffset = 100 / fillDivider;

  //void here to run the loading promise as soon as possible
  void PageLoading.page.element.promiseAnimate({
    opacity: "1",
    duration: totalDuration / 2,
  });

  for (let i = 0; i < loadingOptions.length; i++) {
    const currentOffset = fillOffset * i;
    const options = loadingOptions[i] as LoadingOptions;
    if (options.style === "bar") {
      await PageLoading.showBar();
      if (i === 0) {
        await PageLoading.updateBar(0, 0);
        PageLoading.updateText("");
      }
    } else {
      PageLoading.showSpinner();
    }

    if (options.style === "bar") {
      await getLoadingPromiseWithBarKeyframes(
        options,
        fillDivider,
        currentOffset,
      );
      void PageLoading.updateBar(100, 125);
      PageLoading.updateText("Done");
    } else {
      await options.loadingPromise();
    }
  }

  await PageLoading.page.element.promiseAnimate({
    opacity: "0",
    duration: totalDuration / 2,
  });

  await PageLoading.page.afterHide();
  PageLoading.page.element.hide();
}

// Global abort controller for keyframe promises
let keyframeAbortController: AbortController | null = null;