refactor: use loadingOptions for leaderboards page

Author: Miodec

frontend/src/ts/controllers/page-controller.ts

@@ -275,9 +275,9 @@ export async function change(
     typeof nextPageLoadingMode === "object" &&
     nextPageLoadingMode.mode === "async"
   ) {
-    nextPageLoadingMode.beforeLoading();
+    nextPageLoadingMode.beforeLoading?.();
     void nextPage?.loadingOptions?.loadingPromise().then(() => {
-      nextPageLoadingMode.afterLoading();
+      nextPageLoadingMode.afterLoading?.();
     });
   }
 

frontend/src/ts/pages/leaderboards.ts

@@ -1485,13 +1485,19 @@ export const page = new PageWithUrlParams({
   element: qsr(".page.pageLeaderboards"),
   path: "/leaderboards",
   urlParamsSchema: UrlParameterSchema,
+  loadingOptions: {
+    style: "spinner",
+    loadingMode: () => "sync",
+    loadingPromise: async () => {
+      await ServerConfiguration.configurationPromise;
+    },
+  },
 
   afterHide: async (): Promise<void> => {
     Skeleton.remove("pageLeaderboards");
     stopTimer();
   },
   beforeShow: async (options): Promise<void> => {
-    await ServerConfiguration.configurationPromise;
     Skeleton.append("pageLeaderboards", "main");
     await updateValidDailyLeaderboards();
     await appendModeAndLanguageButtons();

frontend/src/ts/pages/page.ts

@@ -34,7 +34,7 @@ export type LoadingOptions = {
   loadingMode: () =>
     | "none"
     | "sync"
-    | { mode: "async"; beforeLoading: () => void; afterLoading: () => void };
+    | { mode: "async"; beforeLoading?: () => void; afterLoading?: () => void };
   /**
    * When this promise resolves, the loading screen will be hidden.
    */