Function change

frontend/src/ts/controllers/page-controller.ts:281–402

(
  pageName: PageName,
  options = {} as ChangeOptions,
)

}

export async function change(
  pageName: PageName,
  options = {} as ChangeOptions,
): Promise<boolean> {
  const defaultOptions = {
    force: false,
  };

  options = { ...defaultOptions, ...options };

  if (PageTransition.get() && !options.force) {
    console.debug(
      `change page to ${pageName} stopped, page transition is true`,
    );
    return false;
  }

  if (!options.force && getActivePage() === pageName) {
    console.debug(`change page ${pageName} stoped, page already active`);
    return false;
  } else {
    console.log(`changing page ${pageName}`);
  }

  const previousPage = pages[getActivePage()];
  const nextPage = pages[pageName];
  const totalDuration = Misc.applyReducedMotion(250);

  //start
  PageTransition.set(true);
  qsa(".page")?.removeClass("active");

  //previous page
  await previousPage?.beforeHide?.();
  previousPage.element.show().setStyle({ opacity: "1" });
  await previousPage.element.promiseAnimate({
    opacity: "0",
    duration: totalDuration / 2,
  });
  previousPage.element.hide();
  await previousPage?.afterHide();

  // we need to evaluate and store next page loading mode in case options.loadingOptions.loadingMode is sync
  const nextPageLoadingMode = nextPage.loadingOptions?.loadingMode();

  //show loading page if needed
  try {
    let syncLoadingOptions: LoadingOptions[] = [];
    if (options.loadingOptions?.loadingMode() === "sync") {
      syncLoadingOptions.push(options.loadingOptions);
    }
    if (nextPage.loadingOptions?.loadingMode() === "sync") {
      syncLoadingOptions.push(nextPage.loadingOptions);
    }

    if (syncLoadingOptions.length > 0) {
      await showSyncLoading({
        loadingOptions: syncLoadingOptions,