refactor: solid leaderboards (@fehmer)

frontend/__tests__/components/common/AsyncContent.spec.tsx

@@ -47,11 +47,13 @@ describe("AsyncContent", () => {
     });
 
     it("renders on resolve", async () => {
-      renderWithQuery({ result: "Test Data" });
+      const { container } = renderWithQuery({ result: "Test Data" });
 
       await waitFor(() => {
         expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
       });
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
     });
 
     it("renders default error message on fail", async () => {
@@ -205,14 +207,19 @@ describe("AsyncContent", () => {
     });
 
     it("renders on resolve", async () => {
-      renderWithQuery({ first: "First Data", second: "Second Data" });
+      const { container } = renderWithQuery({
+        first: "First Data",
+        second: "Second Data",
+      });
 
       await waitFor(() => {
         expect(screen.getByTestId("first")).toHaveTextContent("First Data");
       });
       await waitFor(() => {
         expect(screen.getByTestId("second")).toHaveTextContent("Second Data");
       });
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
     });
 
     it("renders default error message on fail", async () => {

frontend/src/index.html

@@ -38,7 +38,7 @@
           <div id="ad-vertical-right"></div>
         </div>
         <load src="html/pages/loading.html" />
-        <div class="page pageAbout full-width hidden" id="pageAbout">
+        <div class="page pageAbout hidden full-width" id="pageAbout">
           <mount data-component="aboutpage"></mount>
         </div>
         <load src="html/pages/settings.html" />
@@ -49,7 +49,9 @@
         <load src="html/pages/404.html" />
         <load src="html/pages/account-settings.html" />
         <load src="html/pages/friends.html" />
-        <load src="html/pages/leaderboards.html" />
+        <div class="page pageLeaderboards hidden" id="pageLeaderboards">
+          <mount data-component="leaderboardpage"></mount>
+        </div>
       </main>
       <mount data-component="footer"></mount>
       <div

frontend/src/styles/index.scss

@@ -19,8 +19,7 @@
   @import "buttons", "404", "ads", "account", "animations", "caret",
     "commandline", "core", "fonts", "inputs", "keymap", "login", "monkey",
     "nav", "notifications", "popups", "profile", "scroll", "settings",
-    "account-settings", "leaderboards", "test", "loading", "friends",
-    "media-queries";
+    "account-settings", "test", "loading", "friends", "media-queries";
 
   .chartCanvas {
     width: 100% !important;