refactor: solid leaderboards (@fehmer, @Miodec) (#7485)

Co-authored-by: Jack <jack@monkeytype.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Author: 3 people

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/__tests__/components/ui/table/DataTable.spec.tsx

@@ -30,12 +30,14 @@ type Person = {
 
 const columns = [
   {
+    id: "name",
     accessorKey: "name",
     header: "Name",
     cell: (info: any) => info.getValue(),
-    meta: { breakpoint: "xxs" },
+    meta: { maxBreakpoint: "sm" },
   },
   {
+    id: "age",
     accessorKey: "age",
     header: "Age",
     cell: (info: any) => info.getValue(),
@@ -144,8 +146,13 @@ describe("DataTable", () => {
     });
 
     render(() => <DataTable id="breakpoints" columns={columns} data={data} />);
-
-    expect(screen.getByText("Name")).toBeInTheDocument();
-    expect(screen.queryByText("Age")).not.toBeInTheDocument();
+    const nameHeader = screen.getByRole("button", {
+      name: "Name",
+    }).parentElement;
+    const ageHeader = screen.getByRole("button", { name: "Age" }).parentElement;
+
+    expect(nameHeader).not.toHaveClass("hidden");
+    expect(nameHeader).toHaveClass("sm:hidden");
+    expect(ageHeader).toHaveClass("hidden sm:table-cell");
   });
 });

frontend/src/html/pages/leaderboards.html

@@ -51,7 +51,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/index.html

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