From c984a1b71226d10c4e7e9cbf6b261c5cd0e6f455 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 3 May 2026 09:08:51 +0200
Subject: [PATCH 1/4] style: fix testconfig shifting on some widths

---
 frontend/src/html/pages/test.html                    |  2 +-
 frontend/src/ts/components/pages/test/TestConfig.tsx | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index de4b16820652..49f01e1ba8a9 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -1,5 +1,5 @@
 <div class="page pageTest full-width content-grid hidden" data-nosnippet>
-  <mount data-component="testconfig"></mount>
+  <mount data-component="testconfig" class="full-width"></mount>
 
   <div id="testInitFailed" class="content-grid hidden">
     <div class="message">
diff --git a/frontend/src/ts/components/pages/test/TestConfig.tsx b/frontend/src/ts/components/pages/test/TestConfig.tsx
index 9d81d747b59c..5d9df418aac3 100644
--- a/frontend/src/ts/components/pages/test/TestConfig.tsx
+++ b/frontend/src/ts/components/pages/test/TestConfig.tsx
@@ -16,10 +16,10 @@ import { Anime, AnimeShow } from "../../common/anime";
 import { Button } from "../../common/Button";
 
 const variables = cn(
-  "[--card-gap:0.25em] [--font-size:0.6em] [--horizontal-padding:0.4em] [--vertical-padding:0.7rem]",
-  "md:[--card-gap:1em] md:[--font-size:0.7em] md:[--horizontal-padding:0.45em]",
-  "lg:[--card-gap:1em] lg:[--font-size:0.75em] lg:[--horizontal-padding:0.75em]",
-  "xl:[--card-gap:2em] xl:[--font-size:0.75em] xl:[--horizontal-padding:1em]",
+  "[--card-gap:0.25em] [--font-size:0.5em] [--horizontal-padding:0.4em] [--vertical-padding:0.5rem]",
+  "md:[--card-gap:1em] md:[--font-size:0.6em] md:[--horizontal-padding:0.45em] md:[--vertical-padding:0.75rem]",
+  "lg:[--card-gap:1em] lg:[--font-size:0.75em] lg:[--horizontal-padding:0.5em] lg:[--vertical-padding:0.75rem]",
+  "xl:[--card-gap:2em] xl:[--font-size:0.75em] xl:[--horizontal-padding:1em] xl:[--vertical-padding:0.75rem]",
 );
 const buttonClass = "px-(--horizontal-padding) py-(--vertical-padding)";
 const cardClass =
@@ -32,7 +32,7 @@ export function TestConfig(): JSXElement {
       <div
         class={cn(
           variables,
-          "group relative mb-8 hidden w-max grid-cols-[1fr_auto_1fr] justify-center place-self-center [font-size:var(--font-size)] sm:grid",
+          "group relative mb-8 hidden w-max grid-cols-[1fr_auto_1fr] justify-center place-self-center [font-size:var(--font-size)] md:grid",
           "mx-auto transition-opacity duration-125",
           getFocus() || getResultVisible()
             ? "pointer-events-none opacity-0"
@@ -46,7 +46,7 @@ export function TestConfig(): JSXElement {
       </div>
       <Button
         class={cn(
-          "mx-auto flex place-self-center px-4 py-2 text-sub sm:hidden",
+          "mx-auto flex place-self-center px-4 py-2 text-sub md:hidden",
         )}
         variant="button"
         onClick={() => {

From e698a6fa8c1ae66583633b4987a78eb411de2663 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 3 May 2026 10:12:40 +0200
Subject: [PATCH 2/4] impr: add appendTo prop to SlimSelect for flexible
 content positioning

!nuf
---
 frontend/src/ts/components/modals/CustomGeneratorModal.tsx | 1 +
 frontend/src/ts/components/modals/QuoteReportModal.tsx     | 1 +
 frontend/src/ts/components/modals/QuoteSearchModal.tsx     | 1 +
 frontend/src/ts/components/modals/QuoteSubmitModal.tsx     | 1 +
 frontend/src/ts/components/modals/WordFilterModal.tsx      | 3 +++
 frontend/src/ts/components/ui/SlimSelect.tsx               | 7 +++++--
 6 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/modals/CustomGeneratorModal.tsx b/frontend/src/ts/components/modals/CustomGeneratorModal.tsx
index 0c5b83362820..4d7631f8fb13 100644
--- a/frontend/src/ts/components/modals/CustomGeneratorModal.tsx
+++ b/frontend/src/ts/components/modals/CustomGeneratorModal.tsx
@@ -163,6 +163,7 @@ export function CustomGeneratorModal(props: {
         <LabeledField label="presets">
           <div class="grid grid-cols-[1fr_auto] gap-2">
             <SlimSelect
+              appendTo="container"
               options={presetOptions}
               selected={selectedPreset()}
               onChange={setSelectedPreset}
diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx
index e52ea8a1a8c4..d7e0b1bcd6dc 100644
--- a/frontend/src/ts/components/modals/QuoteReportModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteReportModal.tsx
@@ -144,6 +144,7 @@ export function QuoteReportModal(): JSXElement {
           children={(field) => (
             <LabeledField label="reason">
               <SlimSelect
+                appendTo="container"
                 options={[
                   { value: "Grammatical error", text: "Grammatical error" },
                   { value: "Duplicate quote", text: "Duplicate quote" },
diff --git a/frontend/src/ts/components/modals/QuoteSearchModal.tsx b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
index be364e89536f..bd6cfbe669ef 100644
--- a/frontend/src/ts/components/modals/QuoteSearchModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
@@ -497,6 +497,7 @@ export function QuoteSearchModal(): JSXElement {
           />
           <div class="grow">
             <SlimSelect
+              appendTo="container"
               multiple
               options={[
                 { value: "0", text: "short" },
diff --git a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
index 0f9a5ecf3980..931b60f8122a 100644
--- a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
@@ -162,6 +162,7 @@ export function QuoteSubmitModal(): JSXElement {
           children={(field) => (
             <LabeledField label="language">
               <SlimSelect
+                appendTo="container"
                 options={languageOptions}
                 selected={field().state.value}
                 onChange={(val) => field().handleChange(val ?? "")}
diff --git a/frontend/src/ts/components/modals/WordFilterModal.tsx b/frontend/src/ts/components/modals/WordFilterModal.tsx
index 84bd072111cd..010a23071722 100644
--- a/frontend/src/ts/components/modals/WordFilterModal.tsx
+++ b/frontend/src/ts/components/modals/WordFilterModal.tsx
@@ -231,6 +231,7 @@ export function WordFilterModal(props: {
         <fieldset disabled={loading()} class="grid gap-4">
           <LabeledField label="language">
             <SlimSelect
+              appendTo="container"
               options={languageOptions}
               selected={language()}
               onChange={setLanguage}
@@ -296,6 +297,7 @@ export function WordFilterModal(props: {
             <div class="grid gap-4 self-start">
               <LabeledField label="presets">
                 <SlimSelect
+                  appendTo="container"
                   options={presetOptions}
                   selected={preset()}
                   onChange={setPreset}
@@ -304,6 +306,7 @@ export function WordFilterModal(props: {
               </LabeledField>
               <LabeledField label="layout">
                 <SlimSelect
+                  appendTo="container"
                   options={layoutOptions}
                   selected={layout()}
                   onChange={setLayout}
diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index e6cd154192ba..ae9828f82337 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -33,6 +33,7 @@ export type SlimSelectProps = {
   children?: JSX.Element;
   ref?: (instance: SlimSelectCore | null) => void;
   disabled?: boolean;
+  appendTo?: "body" | "container";
 } & (
   | {
       multiple?: never;
@@ -247,7 +248,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       data: getDataWithAll(buildData(getOptions(), getSelected())) as Option[],
       settings: {
         ...props.settings,
-        contentLocation: containerRef,
+        ...(props.appendTo === "container" && {
+          contentLocation: containerRef,
+        }),
       },
       ...(props.cssClasses && { cssClasses: props.cssClasses }),
       events: {
@@ -480,7 +483,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   return (
     <div
       ref={(el) => (containerRef = el)}
-      class="relative [&>.ss-content]:top-full! [&>.ss-content]:left-0! [&>.ss-content]:w-full!"
+      class={`relative${props.appendTo === "container" ? " [&>.ss-content]:top-full! [&>.ss-content]:left-0! [&>.ss-content]:w-full!" : ""}`}
     >
       <select ref={(el) => (selectRef = el)} multiple={props.multiple}>
         {props.children}

From a1efc6de562588e0688031f76a696804195b4fcb Mon Sep 17 00:00:00 2001
From: Jack <jack@monkeytype.com>
Date: Sun, 3 May 2026 10:30:32 +0200
Subject: [PATCH 3/4] refactor: improve async content (@miodec) (#7899)

Co-authored-by: Christian Fehmer <cfe@sexy-developer.com>
---
 .../components/common/AsyncContent.spec.tsx   |  35 +++--
 .../src/ts/components/common/AsyncContent.tsx | 148 +++++++++++-------
 .../components/modals/VersionHistoryModal.tsx |   6 +-
 .../src/ts/components/pages/AboutPage.tsx     |  45 +++---
 .../pages/leaderboard/LeaderboardPage.tsx     |  97 +++++++-----
 .../components/pages/profile/ProfilePage.tsx  |   6 +-
 .../src/ts/components/popups/alerts/Inbox.tsx |  14 +-
 .../stories/AsyncContent.stories.tsx          |  12 +-
 8 files changed, 222 insertions(+), 141 deletions(-)

diff --git a/frontend/__tests__/components/common/AsyncContent.spec.tsx b/frontend/__tests__/components/common/AsyncContent.spec.tsx
index 6902b670d586..39328af98d2a 100644
--- a/frontend/__tests__/components/common/AsyncContent.spec.tsx
+++ b/frontend/__tests__/components/common/AsyncContent.spec.tsx
@@ -142,7 +142,7 @@ describe("AsyncContent", () => {
       query: {
         result: string | Error;
       },
-      options?: Omit<Props<unknown>, "query" | "queries" | "children">,
+      options?: Omit<Props<{ result: string }>, "queries" | "children">,
     ): {
       container: HTMLElement;
     } {
@@ -160,12 +160,18 @@ describe("AsyncContent", () => {
         }));
 
         return (
-          <AsyncContent query={myQuery} {...(options as Props<string>)}>
-            {(data: string | undefined) => (
+          <AsyncContent
+            queries={{ result: myQuery }}
+            {...(options as Props<{ result: string | undefined }>)}
+          >
+            {({ resultData }) => (
               <>
                 static content
-                <Show when={data !== undefined} fallback={<div>no data</div>}>
-                  <div data-testid="content">{data}</div>
+                <Show
+                  when={resultData() !== undefined}
+                  fallback={<div>no data</div>}
+                >
+                  <div data-testid="content">{resultData()}</div>
                 </Show>
               </>
             )}
@@ -318,7 +324,10 @@ describe("AsyncContent", () => {
         first: string | Error | undefined;
         second: string | Error | undefined;
       },
-      options?: Omit<Props<unknown>, "query" | "queries" | "children">,
+      options?: Omit<
+        Props<{ first: string; second: string }>,
+        "queries" | "children"
+      >,
     ): {
       container: HTMLElement;
     } {
@@ -347,24 +356,20 @@ describe("AsyncContent", () => {
         }));
 
         type Q = { first: string | undefined; second: string | undefined };
+
         return (
           <AsyncContent
             queries={{ first: firstQuery, second: secondQuery }}
             {...(options as Props<Q>)}
           >
-            {(results: {
-              first: string | undefined;
-              second: string | undefined;
-            }) => (
+            {({ firstData, secondData }) => (
               <>
                 <Show
-                  when={
-                    results.first !== undefined && results.second !== undefined
-                  }
+                  when={firstData() !== undefined && secondData() !== undefined}
                   fallback={<div>no data</div>}
                 >
-                  <div data-testid="first">{results.first}</div>
-                  <div data-testid="second">{results.second}</div>
+                  <div data-testid="first">{firstData()}</div>
+                  <div data-testid="second">{secondData()}</div>
                 </Show>
               </>
             )}
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index 4890f7635bd2..1309377dc4ca 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -1,6 +1,7 @@
 import { UseQueryResult } from "@tanstack/solid-query";
 import {
   Accessor,
+  createEffect,
   createMemo,
   ErrorBoundary,
   JSXElement,
@@ -26,8 +27,7 @@ type Collection<T> = Accessor<T> & {
   isError: boolean;
 };
 
-type QueryMapping = Record<string, unknown> | unknown;
-type AsyncMap<T extends QueryMapping> = {
+type AsyncMap<T extends Record<string, unknown>> = {
   [K in keyof T]: AsyncEntry<T[K]>;
 };
 
@@ -38,69 +38,59 @@ type BaseProps = {
   errorClass?: string;
 };
 
-type QueryProps<T extends QueryMapping> = {
+type QueryProps<T extends Record<string, unknown>> = {
   queries: { [K in keyof T]: UseQueryResult<T[K]> };
 };
 
-type SingleQueryProps<T> = {
-  query: UseQueryResult<T>;
-};
-
-type CollectionProps<T extends QueryMapping> = {
+type CollectionProps<T extends Record<string, unknown>> = {
   collections: { [K in keyof T]: Collection<T[K]> };
 };
 
-type SingleCollectionProps<T> = {
-  collection: Collection<T>;
-};
+type AccessorMap<T> = { [K in keyof T]: Accessor<T[K]> };
+type DataKeys<T> = { [K in keyof T as `${K & string}Data`]: T[K] };
 
-type DeferredChildren<T extends QueryMapping> = {
+type Source<T extends Record<string, unknown>> =
+  | QueryProps<T>
+  | CollectionProps<T>;
+
+type DeferredChildren<T extends Record<string, unknown>> = {
   alwaysShowContent?: false;
-  children: (data: { [K in keyof T]: T[K] }) => JSXElement;
+  children: (
+    data: AccessorMap<DataKeys<{ [K in keyof T]: T[K] }>>,
+  ) => JSXElement;
 };
 
-type EagerChildren<T extends QueryMapping> = {
+type EagerChildren<T extends Record<string, unknown>> = {
   alwaysShowContent: true;
   showLoader?: true;
-  children: (data: { [K in keyof T]: T[K] | undefined }) => JSXElement;
+  children: (
+    data: AccessorMap<DataKeys<{ [K in keyof T]: T[K] | undefined }>>,
+  ) => JSXElement;
 };
 
-export type Props<T extends QueryMapping> = BaseProps &
-  (
-    | QueryProps<T>
-    | SingleQueryProps<T>
-    | CollectionProps<T>
-    | SingleCollectionProps<T>
-  ) &
-  (DeferredChildren<T> | EagerChildren<T>);
+type Children<T extends Record<string, unknown>> =
+  | DeferredChildren<T>
+  | EagerChildren<T>;
+
+export type Props<T extends Record<string, unknown>> = BaseProps &
+  Source<T> &
+  Children<T>;
 
-export default function AsyncContent<T extends QueryMapping>(
+function AsyncContent<T extends Record<string, unknown>>(
   props: Props<T>,
 ): JSXElement {
-  //@ts-expect-error this is fine
   const source = createMemo<AsyncMap<T>>(() => {
-    if ("query" in props) {
-      return fromQueries({ defaultQuery: props.query });
-    } else if ("queries" in props) {
+    if ("queries" in props) {
       return fromQueries(props.queries);
-    } else if ("collection" in props) {
-      return fromCollections({ defaultQuery: props.collection });
-    } else if ("collections" in props) {
+    } else {
       return fromCollections(props.collections);
     }
   });
 
-  const value = (): T => {
-    if ("defaultQuery" in source()) {
-      //@ts-expect-error we know the property is present
-      // oxlint-disable-next-line typescript/no-unsafe-call typescript/no-unsafe-member-access
-      return source().defaultQuery.value() as T;
-    } else {
-      return Object.fromEntries(
-        typedKeys(source()).map((key) => [key, source()[key].value()]),
-      ) as T; // For multiple queries
-    }
-  };
+  const value = (): T =>
+    Object.fromEntries(
+      typedKeys(source()).map((key) => [key, source()[key].value()]),
+    ) as T;
 
   const handleError = (err: unknown): string => {
     const message = createErrorMessage(
@@ -119,12 +109,9 @@ export default function AsyncContent<T extends QueryMapping>(
   const allResolved = (
     data: ReturnType<typeof value>,
   ): data is { [K in keyof T]: T[K] } => {
-    //single query
     if (data === undefined || data === null) {
       return false;
     }
-    if ("defaultQuery" in source()) return true;
-
     return Object.values(data).every((v) => v !== undefined && v !== null);
   };
 
@@ -136,6 +123,52 @@ export default function AsyncContent<T extends QueryMapping>(
       .find((s) => s.isError())
       ?.error?.();
 
+  // Keep the last resolved value so deferred children stay mounted during
+  // transient loading states (e.g. navigating away and back).
+  const lastResolvedValue = createMemo<T | undefined>((prev) => {
+    const current = value();
+    return allResolved(current) ? current : prev;
+  });
+
+  const hasResolved = createMemo<boolean>(
+    (prev) => prev || lastResolvedValue() !== undefined,
+    false,
+  );
+
+  // Keys are stable for the component lifetime; per-key closures track
+  // reactivity internally via value()/lastResolvedValue().
+  // oxlint-disable-next-line solid/reactivity -- intentional snapshot of initial keys
+  const keys = typedKeys(source());
+  if (import.meta.env.DEV) {
+    createEffect(() => {
+      const currentKeys = typedKeys(source());
+      if (
+        currentKeys.length !== keys.length ||
+        currentKeys.some((k, i) => k !== keys[i])
+      ) {
+        console.warn(
+          "AsyncContent: query keys changed between renders. This is not supported.",
+        );
+      }
+    });
+  }
+
+  // oxlint-disable solid/reactivity
+  const eagerAccessorMap = Object.fromEntries(
+    typedKeys(source()).map((key) => [
+      `${String(key)}Data`,
+      () => value()?.[key],
+    ]),
+  ) as unknown as AccessorMap<DataKeys<{ [K in keyof T]: T[K] | undefined }>>;
+
+  const deferredAccessorMap = Object.fromEntries(
+    typedKeys(source()).map((key) => [
+      `${String(key)}Data`,
+      () => lastResolvedValue()?.[key],
+    ]),
+  ) as unknown as AccessorMap<DataKeys<{ [K in keyof T]: T[K] }>>;
+  // oxlint-enable solid/reactivity
+
   const loader = (): JSXElement =>
     props.loader ?? <LoadingCircle class="p-4 text-center text-2xl" />;
 
@@ -144,24 +177,31 @@ export default function AsyncContent<T extends QueryMapping>(
       <div class={props.errorClass}>{handleError(err)}</div>
     );
 
+  // Show loader on initial load or when the query key changed (no cached data)
+  const showLoader = (): boolean =>
+    isLoading() && !props.alwaysShowContent && !allResolved(value());
+
   return (
     <ErrorBoundary fallback={props.ignoreError ? undefined : errorText}>
       <Switch
         fallback={
           <>
-            <Show when={isLoading() && !props.alwaysShowContent}>
-              {loader()}
-            </Show>
-
+            <Show when={showLoader()}>{loader()}</Show>
             <Show
               when={props.alwaysShowContent === true}
               fallback={
-                <Show when={allResolved(value())}>
-                  {props.children(value())}
+                <Show when={hasResolved()}>
+                  {(_) =>
+                    // oxlint-disable-next-line typescript/no-explicit-any
+                    (props.children as (data: any) => JSXElement)(
+                      deferredAccessorMap,
+                    )
+                  }
                 </Show>
               }
             >
-              {props.children(value())}
+              {/* oxlint-disable-next-line typescript/no-explicit-any */}
+              {(props.children as (data: any) => JSXElement)(eagerAccessorMap)}
             </Show>
           </>
         }
@@ -170,7 +210,7 @@ export default function AsyncContent<T extends QueryMapping>(
           {errorText(firstError())}
         </Match>
 
-        <Match when={isLoading() && !props.alwaysShowContent}>{loader()}</Match>
+        <Match when={showLoader()}>{loader()}</Match>
       </Switch>
     </ErrorBoundary>
   );
@@ -204,3 +244,5 @@ function fromCollections<T extends Record<string, unknown>>(collections: {
     return acc;
   }, {} as AsyncMap<T>);
 }
+
+export default AsyncContent;
diff --git a/frontend/src/ts/components/modals/VersionHistoryModal.tsx b/frontend/src/ts/components/modals/VersionHistoryModal.tsx
index 44764bd14717..c6da79425ff6 100644
--- a/frontend/src/ts/components/modals/VersionHistoryModal.tsx
+++ b/frontend/src/ts/components/modals/VersionHistoryModal.tsx
@@ -34,13 +34,13 @@ export function VersionHistoryModal(): JSXElement {
       onScroll={fetchMoreVersions}
     >
       <AsyncContent
-        query={releases}
+        queries={{ releases }}
         errorMessage="Failed to load version history"
       >
-        {(data) => (
+        {({ releasesData }) => (
           <>
             <div class="releases">
-              <For each={data.pages.flatMap((it) => it.releases)}>
+              <For each={releasesData().pages.flatMap((it) => it.releases)}>
                 {(release) => <ReleaseItem {...release} />}
               </For>
             </div>
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index b365c71dc9f3..6dd0cf73855e 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -64,25 +64,31 @@ export function AboutPage(): JSXElement {
       <section>
         <AsyncContent
           alwaysShowContent
-          query={typingStats}
+          queries={{ typingStats }}
           errorMessage="Failed to get global typing stats"
         >
-          {(data) => (
+          {({ typingStatsData }) => (
             <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
               <For
                 each={
                   [
-                    ["total tests started", data?.testsStarted],
-                    ["total typing time", data?.timeTyping],
-                    ["total tests completed", data?.testsCompleted],
+                    [
+                      "total tests started",
+                      () => typingStatsData()?.testsStarted,
+                    ],
+                    ["total typing time", () => typingStatsData()?.timeTyping],
+                    [
+                      "total tests completed",
+                      () => typingStatsData()?.testsCompleted,
+                    ],
                   ] as const
                 }
               >
-                {([title, data]) => (
+                {([title, stat]) => (
                   <div class="text-center">
                     <div class="text-sub">{title}</div>
-                    <div class="text-5xl">{data?.text ?? "-"}</div>
-                    <div class="text-xl">{data?.subText ?? "-"}</div>
+                    <div class="text-5xl">{stat()?.text ?? "-"}</div>
+                    <div class="text-xl">{stat()?.subText ?? "-"}</div>
                   </div>
                 )}
               </For>
@@ -93,20 +99,20 @@ export function AboutPage(): JSXElement {
       <section class="h-48 w-full">
         <AsyncContent
           alwaysShowContent
-          query={speedHistogram}
+          queries={{ speedHistogram }}
           errorMessage="Failed to get global speed stats for histogram"
         >
-          {(data) => (
+          {({ speedHistogramData }) => (
             <>
               <ChartJs
                 type="bar"
                 data={{
-                  labels: data?.labels ?? [],
+                  labels: speedHistogramData()?.labels ?? [],
                   datasets: [
                     {
                       yAxisID: "count",
                       label: "Users",
-                      data: data?.data ?? [],
+                      data: speedHistogramData()?.data ?? [],
                       minBarLength: 2,
                       backgroundColor: getTheme().main,
                       borderColor: getTheme().main,
@@ -169,7 +175,8 @@ export function AboutPage(): JSXElement {
               />
               <div class="text-right text-xs text-sub">
                 distribution of time 60 leaderboard results (wpm) <br />
-                {numberOfHistogramRecords(data?.data)} total results
+                {numberOfHistogramRecords(speedHistogramData()?.data)} total
+                results
               </div>
             </>
           )}
@@ -403,17 +410,17 @@ export function AboutPage(): JSXElement {
           text="top supporters"
         />
         <AsyncContent
-          query={supporters}
+          queries={{ supporters }}
           errorMessage="Failed to get supporters"
         >
-          {(data) => (
+          {({ supportersData }) => (
             <div
               class="grid"
               style={{
                 "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
               }}
             >
-              <For each={data}>{(name) => <div>{name}</div>}</For>
+              <For each={supportersData()}>{(name) => <div>{name}</div>}</For>
             </div>
           )}
         </AsyncContent>
@@ -426,17 +433,17 @@ export function AboutPage(): JSXElement {
           text="contributors"
         />
         <AsyncContent
-          query={contributors}
+          queries={{ contributors }}
           errorMessage="Failed to get contributors"
         >
-          {(data) => (
+          {({ contributorsData }) => (
             <div
               class="grid"
               style={{
                 "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
               }}
             >
-              <For each={data}>{(name) => <div>{name}</div>}</For>
+              <For each={contributorsData()}>{(name) => <div>{name}</div>}</For>
             </div>
           )}
         </AsyncContent>
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 15edb775c214..ffb05ddda3ec 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -66,7 +66,7 @@ export function LeaderboardPage(): JSXElement {
 
   //update url after the data is loaded
   createEffect(() => {
-    if (isOpen() && dataQuery.isSuccess) {
+    if (isOpen() && entriesQuery.isSuccess) {
       updateGetParameters(getSelection(), getPage());
     }
   });
@@ -90,7 +90,7 @@ export function LeaderboardPage(): JSXElement {
     }
   });
 
-  const dataQuery = useQuery(() => ({
+  const entriesQuery = useQuery(() => ({
     ...getLeaderboardQueryOptions({
       ...getSelection(),
       page: getPage() ?? 0,
@@ -170,13 +170,18 @@ export function LeaderboardPage(): JSXElement {
     <Show when={isOpen()}>
       <div class="content-grid flex flex-col gap-8 lg:flex-row">
         <div class="w-full shrink-0 lg:w-60 2xl:w-75">
-          <AsyncContent query={serverConfigurationQuery}>
-            {(config) => (
+          <AsyncContent queries={{ serverConfigurationQuery }}>
+            {({ serverConfigurationQueryData }) => (
               <Sidebar
                 selection={getSelection}
                 onSelect={onSelectionChange}
-                validModeRules={config.dailyLeaderboards.validModeRules ?? []}
-                connectionsEnabled={config.connections.enabled}
+                validModeRules={
+                  serverConfigurationQueryData().dailyLeaderboards
+                    .validModeRules ?? []
+                }
+                connectionsEnabled={
+                  serverConfigurationQueryData().connections.enabled
+                }
               />
             )}
           </AsyncContent>
@@ -191,51 +196,61 @@ export function LeaderboardPage(): JSXElement {
           />
 
           <Show
-            when={isAuthenticated() && !dataQuery.isLoading}
+            when={isAuthenticated() && !entriesQuery.isLoading}
             fallback={<Separator />}
           >
             <AsyncContent
               queries={{
-                data: dataQuery,
-                rank: rankQuery,
-                config: serverConfigurationQuery,
+                entriesQuery,
+                rankQuery,
+                serverConfigurationQuery,
               }}
               alwaysShowContent
               errorClass="rounded bg-sub-alt p-4"
             >
-              {({ data, rank, config }) => (
-                <UserRank
-                  type={getSelection().type === "weekly" ? "xp" : "speed"}
-                  data={rank}
-                  friendsOnly={getSelection().friendsOnly}
-                  total={data?.count}
-                  minWpm={
-                    data && "minWpm" in data
-                      ? (data.minWpm as number)
-                      : undefined
-                  }
-                  memoryDifference={getLbMemoryDifference(
-                    getSelection(),
-                    rank?.rank,
-                  )}
-                  isLbOptOut={getSnapshot()?.lbOptOut ?? false}
-                  isBanned={getSnapshot()?.banned ?? false}
-                  minTimeTyping={config?.leaderboards.minTimeTyping ?? 0}
-                  userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
-                />
-              )}
+              {({
+                entriesQueryData,
+                rankQueryData,
+                serverConfigurationQueryData,
+              }) => {
+                const minWpm = () => {
+                  const d = entriesQueryData();
+                  return d && "minWpm" in d ? (d.minWpm as number) : undefined;
+                };
+
+                return (
+                  <UserRank
+                    type={getSelection().type === "weekly" ? "xp" : "speed"}
+                    data={rankQueryData()}
+                    friendsOnly={getSelection().friendsOnly}
+                    total={entriesQueryData()?.count}
+                    minWpm={minWpm()}
+                    memoryDifference={getLbMemoryDifference(
+                      getSelection(),
+                      rankQueryData()?.rank,
+                    )}
+                    isLbOptOut={getSnapshot()?.lbOptOut ?? false}
+                    isBanned={getSnapshot()?.banned ?? false}
+                    minTimeTyping={
+                      serverConfigurationQueryData()?.leaderboards
+                        .minTimeTyping ?? 0
+                    }
+                    userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
+                  />
+                );
+              }}
             </AsyncContent>
           </Show>
 
           <AsyncContent
-            query={dataQuery}
+            queries={{ entriesQuery }}
             loader={
               <div class="flex justify-center pt-4 text-4xl">
                 <LoadingCircle />
               </div>
             }
           >
-            {(data) => (
+            {({ entriesQueryData }) => (
               <div>
                 <div
                   class={cn(
@@ -245,11 +260,13 @@ export function LeaderboardPage(): JSXElement {
                   <NextUpdate type={getSelection().type} />
                   <Navigation
                     isLoading={
-                      dataQuery.isLoading ||
-                      dataQuery.isFetching ||
-                      dataQuery.isRefetching
+                      entriesQuery.isLoading ||
+                      entriesQuery.isFetching ||
+                      entriesQuery.isRefetching
                     }
-                    lastPage={Math.ceil((data?.count ?? 0) / pageSize)}
+                    lastPage={Math.ceil(
+                      (entriesQueryData()?.count ?? 0) / pageSize,
+                    )}
                     userPage={userPage()}
                     currentPage={getPage()}
                     onPageChange={setPage}
@@ -261,7 +278,7 @@ export function LeaderboardPage(): JSXElement {
                 <div>
                   <Table
                     type={getSelection().type === "weekly" ? "xp" : "speed"}
-                    entries={data?.entries ?? []}
+                    entries={entriesQueryData()?.entries ?? []}
                     friendsOnly={getSelection().friendsOnly}
                     scrollToUser={scrollToUser}
                     onScrolledToUser={() => setScrollToUser(false)}
@@ -270,7 +287,9 @@ export function LeaderboardPage(): JSXElement {
 
                 <div class="mt-4 grid grid-cols-1 items-center justify-between text-sm sm:text-base">
                   <Navigation
-                    lastPage={Math.ceil((data?.count ?? 0) / pageSize)}
+                    lastPage={Math.ceil(
+                      (entriesQueryData()?.count ?? 0) / pageSize,
+                    )}
                     currentPage={getPage()}
                     onPageChange={setPage}
                     onScrollToUser={setScrollToUser}
diff --git a/frontend/src/ts/components/pages/profile/ProfilePage.tsx b/frontend/src/ts/components/pages/profile/ProfilePage.tsx
index 122bd205d302..a7197213f095 100644
--- a/frontend/src/ts/components/pages/profile/ProfilePage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfilePage.tsx
@@ -20,8 +20,10 @@ export function ProfilePage(): JSXElement {
   return (
     <Show when={isOpen}>
       <div class="flex h-full items-center justify-center text-lg">
-        <AsyncContent query={profileQuery} ignoreError={true}>
-          {(profile) => <UserProfile profile={profile} />}
+        <AsyncContent queries={{ profileQuery }} ignoreError={true}>
+          {({ profileQueryData }) => (
+            <UserProfile profile={profileQueryData()} />
+          )}
         </AsyncContent>
         <Show when={profileQuery.isError}>
           <div class="flex items-baseline gap-2 text-error">
diff --git a/frontend/src/ts/components/popups/alerts/Inbox.tsx b/frontend/src/ts/components/popups/alerts/Inbox.tsx
index 1783575f238b..ecdf629cdac6 100644
--- a/frontend/src/ts/components/popups/alerts/Inbox.tsx
+++ b/frontend/src/ts/components/popups/alerts/Inbox.tsx
@@ -117,12 +117,14 @@ export function Inbox(): JSXElement {
       }
       body={
         <AsyncContent
-          collection={inboxQuery}
+          collections={{ inboxQuery }}
           loader={<LoadingCircle class="place-self-center text-lg" />}
         >
-          {(inbox) => (
+          {({ inboxQueryData }) => (
             <>
-              <Show when={inboxQuery().some((it) => it.status === "unclaimed")}>
+              <Show
+                when={inboxQueryData().some((it) => it.status === "unclaimed")}
+              >
                 <Button
                   fa={{ icon: "fa-gift", fixedWidth: true }}
                   text="Claim all"
@@ -133,8 +135,8 @@ export function Inbox(): JSXElement {
               </Show>
               <Show
                 when={
-                  inboxQuery().length > 0 &&
-                  inboxQuery().every(
+                  inboxQueryData().length > 0 &&
+                  inboxQueryData().every(
                     (it) => it.status === "read" || it.status === "unread",
                   )
                 }
@@ -149,7 +151,7 @@ export function Inbox(): JSXElement {
               </Show>
 
               <For
-                each={inbox}
+                each={inboxQueryData()}
                 fallback={<div class="place-self-center">Nothing to show</div>}
               >
                 {(entry) => <Entry entry={entry} mutate={mutate} />}
diff --git a/frontend/storybook/stories/AsyncContent.stories.tsx b/frontend/storybook/stories/AsyncContent.stories.tsx
index e4b53b9fdbd5..8a6f71393417 100644
--- a/frontend/storybook/stories/AsyncContent.stories.tsx
+++ b/frontend/storybook/stories/AsyncContent.stories.tsx
@@ -35,7 +35,9 @@ function LoadingExample(): ReturnType<typeof AsyncContent> {
   }));
 
   return (
-    <AsyncContent query={query}>{(data) => <div>{data}</div>}</AsyncContent>
+    <AsyncContent queries={{ query }}>
+      {({ queryData }) => <div>{queryData()}</div>}
+    </AsyncContent>
   );
 }
 
@@ -46,8 +48,10 @@ function SuccessExample(): ReturnType<typeof AsyncContent> {
   }));
 
   return (
-    <AsyncContent query={query}>
-      {(data) => <div style={{ color: "var(--text-color)" }}>{data}</div>}
+    <AsyncContent queries={{ query }}>
+      {({ queryData }) => (
+        <div style={{ color: "var(--text-color)" }}>{queryData()}</div>
+      )}
     </AsyncContent>
   );
 }
@@ -61,7 +65,7 @@ function ErrorExample(): ReturnType<typeof AsyncContent> {
   }));
 
   return (
-    <AsyncContent query={query} errorMessage="Could not load data">
+    <AsyncContent queries={{ query }} errorMessage="Could not load data">
       {() => <div>This won't render</div>}
     </AsyncContent>
   );

From 94b22a77839dbc4618e264194a631514792c066c Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 3 May 2026 10:59:36 +0200
Subject: [PATCH 4/4] impr: enhance ChartJs component with theme handling and
 data updates

!nuf
---
 frontend/src/ts/components/common/ChartJs.tsx | 34 +++++++++++++++----
 .../src/ts/components/pages/AboutPage.tsx     |  1 +
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index a38fbdb452cf..916fb539eee2 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -8,17 +8,23 @@ import {
   ScaleChartOptions,
 } from "chart.js";
 import chartTrendline from "chartjs-plugin-trendline";
-import { createEffect, JSXElement, onCleanup, onMount } from "solid-js";
+import { createDeferred, JSXElement, onCleanup, onMount } from "solid-js";
 
 import { Theme } from "../../constants/themes";
+import { createEffectOn } from "../../hooks/effects";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getTheme } from "../../states/theme";
 
+function getThemeHash(): string {
+  return Object.values(getTheme()).join("");
+}
+
 Chart.register(chartTrendline);
 type ChartJSProps<
   T extends ChartType = ChartType,
   TData = DefaultDataPoint<T>,
 > = {
+  name: string;
   type: T;
   data: ChartData<T, TData>;
   options?: ChartOptions<T>;
@@ -32,28 +38,44 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   const [canvasRef, canvasEl] = useRefWithUtils<HTMLCanvasElement>();
 
   let chart: Chart<T, TData> | undefined;
+  let theme = "";
 
   onMount(() => {
     const canvas = canvasEl();
     if (canvas === undefined) return;
+    if (chart !== undefined) return;
+
     chart = new Chart(canvas.native, {
       type: props.type,
       data: props.data,
       options: addColorsToOptions(props.options as ChartOptions<T>, getTheme),
     });
-
+    theme = getThemeHash();
     props.onChartInit?.(chart);
   });
 
-  createEffect(() => {
+  const updateChart = (data: ChartData<T, TData>): void => {
     if (!chart) return;
 
-    chart.config.type = props.type;
-    chart.data = props.data;
+    chart.data = data;
+
     if (props.options) {
       chart.options = addColorsToOptions(props.options, getTheme);
     }
-    chart.update();
+
+    chart.update("none");
+  };
+
+  const deferredData = createDeferred(() => props.data, { timeoutMs: 500 });
+
+  createEffectOn(deferredData, (data) => updateChart(data));
+
+  createEffectOn(getTheme, () => {
+    if (!chart) return;
+    const newTheme = getThemeHash();
+    if (theme === newTheme) return;
+    theme = newTheme;
+    updateChart(deferredData());
   });
 
   onCleanup(() => {
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 6dd0cf73855e..29cdf9620978 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -105,6 +105,7 @@ export function AboutPage(): JSXElement {
           {({ speedHistogramData }) => (
             <>
               <ChartJs
+                name="SpeedHistogram"
                 type="bar"
                 data={{
                   labels: speedHistogramData()?.labels ?? [],