From c147efe67d9fc2558d53ae5dfcc757b8b741807d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 20:32:12 +0200
Subject: [PATCH 01/15] brrr

---
 .../components/common/AsyncContent.spec.tsx   | 73 ++++++++++++++++---
 .../src/ts/components/common/AsyncContent.tsx | 41 ++++++++---
 .../components/modals/VersionHistoryModal.tsx |  2 +-
 .../src/ts/components/pages/AboutPage.tsx     | 54 +++++++-------
 .../pages/leaderboard/LeaderboardPage.tsx     | 58 ++++++++-------
 .../components/pages/profile/ProfilePage.tsx  |  2 +-
 .../src/ts/components/popups/alerts/Inbox.tsx |  2 +-
 .../stories/AsyncContent.stories.tsx          |  4 +-
 8 files changed, 158 insertions(+), 78 deletions(-)

diff --git a/frontend/__tests__/components/common/AsyncContent.spec.tsx b/frontend/__tests__/components/common/AsyncContent.spec.tsx
index 6902b670d586..07c5e44a45f2 100644
--- a/frontend/__tests__/components/common/AsyncContent.spec.tsx
+++ b/frontend/__tests__/components/common/AsyncContent.spec.tsx
@@ -159,13 +159,39 @@ describe("AsyncContent", () => {
           retry: 0,
         }));
 
+        if (options?.alwaysShowContent) {
+          return (
+            <AsyncContent
+              query={myQuery}
+              {...(options as Props<string>)}
+              alwaysShowContent
+            >
+              {(data) => (
+                <>
+                  static content
+                  <Show
+                    when={data() !== undefined}
+                    fallback={<div>no data</div>}
+                  >
+                    <div data-testid="content">{data()}</div>
+                  </Show>
+                </>
+              )}
+            </AsyncContent>
+          );
+        }
+
         return (
-          <AsyncContent query={myQuery} {...(options as Props<string>)}>
-            {(data: string | undefined) => (
+          <AsyncContent
+            query={myQuery}
+            {...(options as Props<string>)}
+            alwaysShowContent={false}
+          >
+            {(data) => (
               <>
                 static content
-                <Show when={data !== undefined} fallback={<div>no data</div>}>
-                  <div data-testid="content">{data}</div>
+                <Show when={data() !== undefined} fallback={<div>no data</div>}>
+                  <div data-testid="content">{data()}</div>
                 </Show>
               </>
             )}
@@ -347,24 +373,49 @@ describe("AsyncContent", () => {
         }));
 
         type Q = { first: string | undefined; second: string | undefined };
+
+        if (options?.alwaysShowContent) {
+          return (
+            <AsyncContent
+              queries={{ first: firstQuery, second: secondQuery }}
+              {...(options as Props<Q>)}
+              alwaysShowContent
+            >
+              {(results) => (
+                <>
+                  <Show
+                    when={
+                      results()?.first !== undefined &&
+                      results()?.second !== undefined
+                    }
+                    fallback={<div>no data</div>}
+                  >
+                    <div data-testid="first">{results()?.first}</div>
+                    <div data-testid="second">{results()?.second}</div>
+                  </Show>
+                </>
+              )}
+            </AsyncContent>
+          );
+        }
+
         return (
           <AsyncContent
             queries={{ first: firstQuery, second: secondQuery }}
             {...(options as Props<Q>)}
+            alwaysShowContent={false}
           >
-            {(results: {
-              first: string | undefined;
-              second: string | undefined;
-            }) => (
+            {(results) => (
               <>
                 <Show
                   when={
-                    results.first !== undefined && results.second !== undefined
+                    results().first !== undefined &&
+                    results().second !== undefined
                   }
                   fallback={<div>no data</div>}
                 >
-                  <div data-testid="first">{results.first}</div>
-                  <div data-testid="second">{results.second}</div>
+                  <div data-testid="first">{results().first}</div>
+                  <div data-testid="second">{results().second}</div>
                 </Show>
               </>
             )}
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index 4890f7635bd2..4c4b915dc2f6 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -56,13 +56,15 @@ type SingleCollectionProps<T> = {
 
 type DeferredChildren<T extends QueryMapping> = {
   alwaysShowContent?: false;
-  children: (data: { [K in keyof T]: T[K] }) => JSXElement;
+  children: (data: Accessor<{ [K in keyof T]: T[K] }>) => JSXElement;
 };
 
 type EagerChildren<T extends QueryMapping> = {
   alwaysShowContent: true;
   showLoader?: true;
-  children: (data: { [K in keyof T]: T[K] | undefined }) => JSXElement;
+  children: (
+    data: Accessor<{ [K in keyof T]: T[K] } | undefined>,
+  ) => JSXElement;
 };
 
 export type Props<T extends QueryMapping> = BaseProps &
@@ -136,6 +138,18 @@ 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,
+  );
+
   const loader = (): JSXElement =>
     props.loader ?? <LoadingCircle class="p-4 text-center text-2xl" />;
 
@@ -144,24 +158,31 @@ export default function AsyncContent<T extends QueryMapping>(
       <div class={props.errorClass}>{handleError(err)}</div>
     );
 
+  // Only show loader on initial load, not on refetches
+  const showLoader = (): boolean =>
+    isLoading() &&
+    !props.alwaysShowContent &&
+    lastResolvedValue() === undefined;
+
   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()}>
+                  {(_) =>
+                    props.children(
+                      lastResolvedValue as Accessor<{ [K in keyof T]: T[K] }>,
+                    )
+                  }
                 </Show>
               }
             >
-              {props.children(value())}
+              {props.children(value)}
             </Show>
           </>
         }
@@ -170,7 +191,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>
   );
diff --git a/frontend/src/ts/components/modals/VersionHistoryModal.tsx b/frontend/src/ts/components/modals/VersionHistoryModal.tsx
index 44764bd14717..5f0939fcf35d 100644
--- a/frontend/src/ts/components/modals/VersionHistoryModal.tsx
+++ b/frontend/src/ts/components/modals/VersionHistoryModal.tsx
@@ -40,7 +40,7 @@ export function VersionHistoryModal(): JSXElement {
         {(data) => (
           <>
             <div class="releases">
-              <For each={data.pages.flatMap((it) => it.releases)}>
+              <For each={data().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..475d3e0f26cc 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -67,27 +67,29 @@ export function AboutPage(): JSXElement {
           query={typingStats}
           errorMessage="Failed to get global typing stats"
         >
-          {(data) => (
-            <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],
-                  ] as const
-                }
-              >
-                {([title, data]) => (
-                  <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>
-                )}
-              </For>
-            </div>
-          )}
+          {(data) => {
+            return (
+              <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],
+                    ] as const
+                  }
+                >
+                  {([title, stat]) => (
+                    <div class="text-center">
+                      <div class="text-sub">{title}</div>
+                      <div class="text-5xl">{stat()?.text ?? "-"}</div>
+                      <div class="text-xl">{stat()?.subText ?? "-"}</div>
+                    </div>
+                  )}
+                </For>
+              </div>
+            );
+          }}
         </AsyncContent>
       </section>
       <section class="h-48 w-full">
@@ -101,12 +103,12 @@ export function AboutPage(): JSXElement {
               <ChartJs
                 type="bar"
                 data={{
-                  labels: data?.labels ?? [],
+                  labels: data()?.labels ?? [],
                   datasets: [
                     {
                       yAxisID: "count",
                       label: "Users",
-                      data: data?.data ?? [],
+                      data: data()?.data ?? [],
                       minBarLength: 2,
                       backgroundColor: getTheme().main,
                       borderColor: getTheme().main,
@@ -169,7 +171,7 @@ 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(data()?.data)} total results
               </div>
             </>
           )}
@@ -413,7 +415,7 @@ export function AboutPage(): JSXElement {
                 "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
               }}
             >
-              <For each={data}>{(name) => <div>{name}</div>}</For>
+              <For each={data()}>{(name) => <div>{name}</div>}</For>
             </div>
           )}
         </AsyncContent>
@@ -436,7 +438,7 @@ export function AboutPage(): JSXElement {
                 "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
               }}
             >
-              <For each={data}>{(name) => <div>{name}</div>}</For>
+              <For each={data()}>{(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..146021f9461d 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -175,8 +175,8 @@ export function LeaderboardPage(): JSXElement {
               <Sidebar
                 selection={getSelection}
                 onSelect={onSelectionChange}
-                validModeRules={config.dailyLeaderboards.validModeRules ?? []}
-                connectionsEnabled={config.connections.enabled}
+                validModeRules={config().dailyLeaderboards.validModeRules ?? []}
+                connectionsEnabled={config().connections.enabled}
               />
             )}
           </AsyncContent>
@@ -203,27 +203,33 @@ export function LeaderboardPage(): JSXElement {
               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}
-                />
-              )}
+              {(queries) => {
+                const data = () => queries()?.data;
+                const rank = () => queries()?.rank;
+                const config = () => queries()?.config;
+                return (
+                  <UserRank
+                    type={getSelection().type === "weekly" ? "xp" : "speed"}
+                    data={rank()}
+                    friendsOnly={getSelection().friendsOnly}
+                    total={data()?.count}
+                    minWpm={(() => {
+                      const d = data();
+                      return d && "minWpm" in d
+                        ? (d.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}
+                  />
+                );
+              }}
             </AsyncContent>
           </Show>
 
@@ -249,7 +255,7 @@ export function LeaderboardPage(): JSXElement {
                       dataQuery.isFetching ||
                       dataQuery.isRefetching
                     }
-                    lastPage={Math.ceil((data?.count ?? 0) / pageSize)}
+                    lastPage={Math.ceil((data()?.count ?? 0) / pageSize)}
                     userPage={userPage()}
                     currentPage={getPage()}
                     onPageChange={setPage}
@@ -261,7 +267,7 @@ export function LeaderboardPage(): JSXElement {
                 <div>
                   <Table
                     type={getSelection().type === "weekly" ? "xp" : "speed"}
-                    entries={data?.entries ?? []}
+                    entries={data()?.entries ?? []}
                     friendsOnly={getSelection().friendsOnly}
                     scrollToUser={scrollToUser}
                     onScrolledToUser={() => setScrollToUser(false)}
@@ -270,7 +276,7 @@ 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((data()?.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..6ab257a85ccd 100644
--- a/frontend/src/ts/components/pages/profile/ProfilePage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfilePage.tsx
@@ -21,7 +21,7 @@ export function ProfilePage(): JSXElement {
     <Show when={isOpen}>
       <div class="flex h-full items-center justify-center text-lg">
         <AsyncContent query={profileQuery} ignoreError={true}>
-          {(profile) => <UserProfile profile={profile} />}
+          {(profile) => <UserProfile profile={profile()} />}
         </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..8d2829f4f09d 100644
--- a/frontend/src/ts/components/popups/alerts/Inbox.tsx
+++ b/frontend/src/ts/components/popups/alerts/Inbox.tsx
@@ -149,7 +149,7 @@ export function Inbox(): JSXElement {
               </Show>
 
               <For
-                each={inbox}
+                each={inbox()}
                 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..aa7418b2c4f0 100644
--- a/frontend/storybook/stories/AsyncContent.stories.tsx
+++ b/frontend/storybook/stories/AsyncContent.stories.tsx
@@ -35,7 +35,7 @@ function LoadingExample(): ReturnType<typeof AsyncContent> {
   }));
 
   return (
-    <AsyncContent query={query}>{(data) => <div>{data}</div>}</AsyncContent>
+    <AsyncContent query={query}>{(data) => <div>{data()}</div>}</AsyncContent>
   );
 }
 
@@ -47,7 +47,7 @@ function SuccessExample(): ReturnType<typeof AsyncContent> {
 
   return (
     <AsyncContent query={query}>
-      {(data) => <div style={{ color: "var(--text-color)" }}>{data}</div>}
+      {(data) => <div style={{ color: "var(--text-color)" }}>{data()}</div>}
     </AsyncContent>
   );
 }

From b89904c4bd1ae52f79aa508dc1b54e7609ed86ce Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 20:58:31 +0200
Subject: [PATCH 02/15] simplify props destructuring in AsyncContent and
 LeaderboardPage components

---
 .../components/common/AsyncContent.spec.tsx   | 22 ++----
 .../src/ts/components/common/AsyncContent.tsx | 78 +++++++++++++++----
 .../pages/leaderboard/LeaderboardPage.tsx     | 49 ++++++------
 3 files changed, 94 insertions(+), 55 deletions(-)

diff --git a/frontend/__tests__/components/common/AsyncContent.spec.tsx b/frontend/__tests__/components/common/AsyncContent.spec.tsx
index 07c5e44a45f2..1b8e4a21e9d5 100644
--- a/frontend/__tests__/components/common/AsyncContent.spec.tsx
+++ b/frontend/__tests__/components/common/AsyncContent.spec.tsx
@@ -381,17 +381,14 @@ describe("AsyncContent", () => {
               {...(options as Props<Q>)}
               alwaysShowContent
             >
-              {(results) => (
+              {({ first, second }) => (
                 <>
                   <Show
-                    when={
-                      results()?.first !== undefined &&
-                      results()?.second !== undefined
-                    }
+                    when={first() !== undefined && second() !== undefined}
                     fallback={<div>no data</div>}
                   >
-                    <div data-testid="first">{results()?.first}</div>
-                    <div data-testid="second">{results()?.second}</div>
+                    <div data-testid="first">{first()}</div>
+                    <div data-testid="second">{second()}</div>
                   </Show>
                 </>
               )}
@@ -405,17 +402,14 @@ describe("AsyncContent", () => {
             {...(options as Props<Q>)}
             alwaysShowContent={false}
           >
-            {(results) => (
+            {({ first, second }) => (
               <>
                 <Show
-                  when={
-                    results().first !== undefined &&
-                    results().second !== undefined
-                  }
+                  when={first() !== undefined && second() !== undefined}
                   fallback={<div>no data</div>}
                 >
-                  <div data-testid="first">{results().first}</div>
-                  <div data-testid="second">{results().second}</div>
+                  <div data-testid="first">{first()}</div>
+                  <div data-testid="second">{second()}</div>
                 </Show>
               </>
             )}
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index 4c4b915dc2f6..4b275a92f4b4 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -54,6 +54,8 @@ type SingleCollectionProps<T> = {
   collection: Collection<T>;
 };
 
+type AccessorMap<T> = { [K in keyof T]: Accessor<T[K]> };
+
 type DeferredChildren<T extends QueryMapping> = {
   alwaysShowContent?: false;
   children: (data: Accessor<{ [K in keyof T]: T[K] }>) => JSXElement;
@@ -67,18 +69,39 @@ type EagerChildren<T extends QueryMapping> = {
   ) => JSXElement;
 };
 
+type MultiDeferredChildren<T extends QueryMapping> = {
+  alwaysShowContent?: false;
+  children: (data: AccessorMap<{ [K in keyof T]: T[K] }>) => JSXElement;
+};
+
+type MultiEagerChildren<T extends QueryMapping> = {
+  alwaysShowContent: true;
+  showLoader?: true;
+  children: (
+    data: AccessorMap<{ [K in keyof T]: T[K] | undefined }>,
+  ) => JSXElement;
+};
+
+type SingleSource<T> = SingleQueryProps<T> | SingleCollectionProps<T>;
+type MultiSource<T extends QueryMapping> = QueryProps<T> | CollectionProps<T>;
+type SingleChildren<T> = DeferredChildren<T> | EagerChildren<T>;
+type MultiChildren<T extends QueryMapping> =
+  | MultiDeferredChildren<T>
+  | MultiEagerChildren<T>;
+
 export type Props<T extends QueryMapping> = BaseProps &
-  (
-    | QueryProps<T>
-    | SingleQueryProps<T>
-    | CollectionProps<T>
-    | SingleCollectionProps<T>
-  ) &
-  (DeferredChildren<T> | EagerChildren<T>);
-
-export default function AsyncContent<T extends QueryMapping>(
-  props: Props<T>,
-): JSXElement {
+  (SingleSource<T> | MultiSource<T>) &
+  (SingleChildren<T> | MultiChildren<T>);
+
+// Single query/collection overloads
+function AsyncContent<T>(
+  props: BaseProps & SingleSource<T> & SingleChildren<T>,
+): JSXElement;
+// Multi query/collection overloads
+function AsyncContent<T extends Record<string, unknown>>(
+  props: BaseProps & MultiSource<T> & MultiChildren<T>,
+): JSXElement;
+function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
   //@ts-expect-error this is fine
   const source = createMemo<AsyncMap<T>>(() => {
     if ("query" in props) {
@@ -150,6 +173,27 @@ export default function AsyncContent<T extends QueryMapping>(
     false,
   );
 
+  // Keys are stable for the component lifetime; per-key closures track
+  // reactivity internally via value()/lastResolvedValue().
+  // oxlint-disable solid/reactivity
+  const multi = !("defaultQuery" in source());
+
+  const eagerAccessorMap = multi
+    ? (Object.fromEntries(
+        typedKeys(source()).map((key) => [key, () => value()?.[key]]),
+      ) as AccessorMap<{ [K in keyof T]: T[K] | undefined }>)
+    : undefined;
+
+  const deferredAccessorMap = multi
+    ? (Object.fromEntries(
+        typedKeys(source()).map((key) => [
+          key,
+          () => lastResolvedValue()?.[key],
+        ]),
+      ) as AccessorMap<{ [K in keyof T]: T[K] }>)
+    : undefined;
+  // oxlint-enable solid/reactivity
+
   const loader = (): JSXElement =>
     props.loader ?? <LoadingCircle class="p-4 text-center text-2xl" />;
 
@@ -175,14 +219,18 @@ export default function AsyncContent<T extends QueryMapping>(
               fallback={
                 <Show when={hasResolved()}>
                   {(_) =>
-                    props.children(
-                      lastResolvedValue as Accessor<{ [K in keyof T]: T[K] }>,
+                    // oxlint-disable-next-line typescript/no-explicit-any
+                    (props.children as (data: any) => JSXElement)(
+                      multi ? deferredAccessorMap : lastResolvedValue,
                     )
                   }
                 </Show>
               }
             >
-              {props.children(value)}
+              {/* oxlint-disable-next-line typescript/no-explicit-any */}
+              {(props.children as (data: any) => JSXElement)(
+                multi ? eagerAccessorMap : value,
+              )}
             </Show>
           </>
         }
@@ -225,3 +273,5 @@ function fromCollections<T extends Record<string, unknown>>(collections: {
     return acc;
   }, {} as AsyncMap<T>);
 }
+
+export default AsyncContent;
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 146021f9461d..7c56bcde099d 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -203,33 +203,28 @@ export function LeaderboardPage(): JSXElement {
               alwaysShowContent
               errorClass="rounded bg-sub-alt p-4"
             >
-              {(queries) => {
-                const data = () => queries()?.data;
-                const rank = () => queries()?.rank;
-                const config = () => queries()?.config;
-                return (
-                  <UserRank
-                    type={getSelection().type === "weekly" ? "xp" : "speed"}
-                    data={rank()}
-                    friendsOnly={getSelection().friendsOnly}
-                    total={data()?.count}
-                    minWpm={(() => {
-                      const d = data();
-                      return d && "minWpm" in d
-                        ? (d.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}
-                  />
-                );
-              }}
+              {({ data, rank, config }) => (
+                <UserRank
+                  type={getSelection().type === "weekly" ? "xp" : "speed"}
+                  data={rank()}
+                  friendsOnly={getSelection().friendsOnly}
+                  total={data()?.count}
+                  minWpm={(() => {
+                    const d = data();
+                    return d && "minWpm" in d
+                      ? (d.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}
+                />
+              )}
             </AsyncContent>
           </Show>
 

From d7479b33ac31d40c7870f0711f7d23406056db90 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 21:32:32 +0200
Subject: [PATCH 03/15] rework

---
 .../components/common/AsyncContent.spec.tsx    | 18 ++++++++++--------
 .../src/ts/components/common/AsyncContent.tsx  | 18 ++++++++++++------
 .../components/modals/VersionHistoryModal.tsx  |  6 +++---
 .../pages/leaderboard/LeaderboardPage.tsx      | 12 ++++++------
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/frontend/__tests__/components/common/AsyncContent.spec.tsx b/frontend/__tests__/components/common/AsyncContent.spec.tsx
index 1b8e4a21e9d5..6de008c642df 100644
--- a/frontend/__tests__/components/common/AsyncContent.spec.tsx
+++ b/frontend/__tests__/components/common/AsyncContent.spec.tsx
@@ -381,14 +381,16 @@ describe("AsyncContent", () => {
               {...(options as Props<Q>)}
               alwaysShowContent
             >
-              {({ first, second }) => (
+              {({ firstData, secondData }) => (
                 <>
                   <Show
-                    when={first() !== undefined && second() !== undefined}
+                    when={
+                      firstData() !== undefined && secondData() !== undefined
+                    }
                     fallback={<div>no data</div>}
                   >
-                    <div data-testid="first">{first()}</div>
-                    <div data-testid="second">{second()}</div>
+                    <div data-testid="first">{firstData()}</div>
+                    <div data-testid="second">{secondData()}</div>
                   </Show>
                 </>
               )}
@@ -402,14 +404,14 @@ describe("AsyncContent", () => {
             {...(options as Props<Q>)}
             alwaysShowContent={false}
           >
-            {({ first, second }) => (
+            {({ firstData, secondData }) => (
               <>
                 <Show
-                  when={first() !== undefined && second() !== undefined}
+                  when={firstData() !== undefined && secondData() !== undefined}
                   fallback={<div>no data</div>}
                 >
-                  <div data-testid="first">{first()}</div>
-                  <div data-testid="second">{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 4b275a92f4b4..a375380186f8 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -55,6 +55,7 @@ type SingleCollectionProps<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> = {
   alwaysShowContent?: false;
@@ -71,14 +72,16 @@ type EagerChildren<T extends QueryMapping> = {
 
 type MultiDeferredChildren<T extends QueryMapping> = {
   alwaysShowContent?: false;
-  children: (data: AccessorMap<{ [K in keyof T]: T[K] }>) => JSXElement;
+  children: (
+    data: AccessorMap<DataKeys<{ [K in keyof T]: T[K] }>>,
+  ) => JSXElement;
 };
 
 type MultiEagerChildren<T extends QueryMapping> = {
   alwaysShowContent: true;
   showLoader?: true;
   children: (
-    data: AccessorMap<{ [K in keyof T]: T[K] | undefined }>,
+    data: AccessorMap<DataKeys<{ [K in keyof T]: T[K] | undefined }>>,
   ) => JSXElement;
 };
 
@@ -180,17 +183,20 @@ function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
 
   const eagerAccessorMap = multi
     ? (Object.fromEntries(
-        typedKeys(source()).map((key) => [key, () => value()?.[key]]),
-      ) as AccessorMap<{ [K in keyof T]: T[K] | undefined }>)
+        typedKeys(source()).map((key) => [
+          `${String(key)}Data`,
+          () => value()?.[key],
+        ]),
+      ) as AccessorMap<DataKeys<{ [K in keyof T]: T[K] | undefined }>>)
     : undefined;
 
   const deferredAccessorMap = multi
     ? (Object.fromEntries(
         typedKeys(source()).map((key) => [
-          key,
+          `${String(key)}Data`,
           () => lastResolvedValue()?.[key],
         ]),
-      ) as AccessorMap<{ [K in keyof T]: T[K] }>)
+      ) as AccessorMap<DataKeys<{ [K in keyof T]: T[K] }>>)
     : undefined;
   // oxlint-enable solid/reactivity
 
diff --git a/frontend/src/ts/components/modals/VersionHistoryModal.tsx b/frontend/src/ts/components/modals/VersionHistoryModal.tsx
index 5f0939fcf35d..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/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 7c56bcde099d..c7c7f4859a53 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -203,25 +203,25 @@ export function LeaderboardPage(): JSXElement {
               alwaysShowContent
               errorClass="rounded bg-sub-alt p-4"
             >
-              {({ data, rank, config }) => (
+              {({ dataData, rankData, configData }) => (
                 <UserRank
                   type={getSelection().type === "weekly" ? "xp" : "speed"}
-                  data={rank()}
+                  data={rankData()}
                   friendsOnly={getSelection().friendsOnly}
-                  total={data()?.count}
+                  total={dataData()?.count}
                   minWpm={(() => {
-                    const d = data();
+                    const d = dataData();
                     return d && "minWpm" in d
                       ? (d.minWpm as number)
                       : undefined;
                   })()}
                   memoryDifference={getLbMemoryDifference(
                     getSelection(),
-                    rank()?.rank,
+                    rankData()?.rank,
                   )}
                   isLbOptOut={getSnapshot()?.lbOptOut ?? false}
                   isBanned={getSnapshot()?.banned ?? false}
-                  minTimeTyping={config()?.leaderboards.minTimeTyping ?? 0}
+                  minTimeTyping={configData()?.leaderboards.minTimeTyping ?? 0}
                   userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
                 />
               )}

From 403c1408b802b6b15312bc36c9930be794c1ae9e Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 22:28:50 +0200
Subject: [PATCH 04/15] remove single mode

---
 .../components/common/AsyncContent.spec.tsx   |  30 ++--
 .../src/ts/components/common/AsyncContent.tsx | 128 ++++++------------
 .../src/ts/components/pages/AboutPage.tsx     |  42 +++---
 .../pages/leaderboard/LeaderboardPage.tsx     |  20 +--
 .../components/pages/profile/ProfilePage.tsx  |   4 +-
 .../src/ts/components/popups/alerts/Inbox.tsx |   6 +-
 .../stories/AsyncContent.stories.tsx          |  12 +-
 7 files changed, 107 insertions(+), 135 deletions(-)

diff --git a/frontend/__tests__/components/common/AsyncContent.spec.tsx b/frontend/__tests__/components/common/AsyncContent.spec.tsx
index 6de008c642df..a3ef45ce3dd7 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;
     } {
@@ -162,18 +162,18 @@ describe("AsyncContent", () => {
         if (options?.alwaysShowContent) {
           return (
             <AsyncContent
-              query={myQuery}
-              {...(options as Props<string>)}
+              queries={{ result: myQuery }}
+              {...(options as Props<{ result: string }>)}
               alwaysShowContent
             >
-              {(data) => (
+              {({ resultData }) => (
                 <>
                   static content
                   <Show
-                    when={data() !== undefined}
+                    when={resultData() !== undefined}
                     fallback={<div>no data</div>}
                   >
-                    <div data-testid="content">{data()}</div>
+                    <div data-testid="content">{resultData()}</div>
                   </Show>
                 </>
               )}
@@ -183,15 +183,18 @@ describe("AsyncContent", () => {
 
         return (
           <AsyncContent
-            query={myQuery}
-            {...(options as Props<string>)}
+            queries={{ result: myQuery }}
+            {...(options as Props<{ result: string }>)}
             alwaysShowContent={false}
           >
-            {(data) => (
+            {({ 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>
               </>
             )}
@@ -344,7 +347,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;
     } {
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index a375380186f8..b64849dcfd65 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -26,8 +26,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,46 +37,29 @@ 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> = {
-  alwaysShowContent?: false;
-  children: (data: Accessor<{ [K in keyof T]: T[K] }>) => JSXElement;
-};
+type Source<T extends Record<string, unknown>> =
+  | QueryProps<T>
+  | CollectionProps<T>;
 
-type EagerChildren<T extends QueryMapping> = {
-  alwaysShowContent: true;
-  showLoader?: true;
-  children: (
-    data: Accessor<{ [K in keyof T]: T[K] } | undefined>,
-  ) => JSXElement;
-};
-
-type MultiDeferredChildren<T extends QueryMapping> = {
+type DeferredChildren<T extends Record<string, unknown>> = {
   alwaysShowContent?: false;
   children: (
     data: AccessorMap<DataKeys<{ [K in keyof T]: T[K] }>>,
   ) => JSXElement;
 };
 
-type MultiEagerChildren<T extends QueryMapping> = {
+type EagerChildren<T extends Record<string, unknown>> = {
   alwaysShowContent: true;
   showLoader?: true;
   children: (
@@ -85,50 +67,29 @@ type MultiEagerChildren<T extends QueryMapping> = {
   ) => JSXElement;
 };
 
-type SingleSource<T> = SingleQueryProps<T> | SingleCollectionProps<T>;
-type MultiSource<T extends QueryMapping> = QueryProps<T> | CollectionProps<T>;
-type SingleChildren<T> = DeferredChildren<T> | EagerChildren<T>;
-type MultiChildren<T extends QueryMapping> =
-  | MultiDeferredChildren<T>
-  | MultiEagerChildren<T>;
-
-export type Props<T extends QueryMapping> = BaseProps &
-  (SingleSource<T> | MultiSource<T>) &
-  (SingleChildren<T> | MultiChildren<T>);
-
-// Single query/collection overloads
-function AsyncContent<T>(
-  props: BaseProps & SingleSource<T> & SingleChildren<T>,
-): JSXElement;
-// Multi query/collection overloads
+type Children<T extends Record<string, unknown>> =
+  | DeferredChildren<T>
+  | EagerChildren<T>;
+
+export type Props<T extends Record<string, unknown>> = BaseProps &
+  Source<T> &
+  Children<T>;
+
 function AsyncContent<T extends Record<string, unknown>>(
-  props: BaseProps & MultiSource<T> & MultiChildren<T>,
-): JSXElement;
-function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
-  //@ts-expect-error this is fine
+  props: Props<T>,
+): JSXElement {
   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(
@@ -147,12 +108,9 @@ function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
   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);
   };
 
@@ -179,25 +137,19 @@ function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
   // Keys are stable for the component lifetime; per-key closures track
   // reactivity internally via value()/lastResolvedValue().
   // oxlint-disable solid/reactivity
-  const multi = !("defaultQuery" in source());
-
-  const eagerAccessorMap = multi
-    ? (Object.fromEntries(
-        typedKeys(source()).map((key) => [
-          `${String(key)}Data`,
-          () => value()?.[key],
-        ]),
-      ) as AccessorMap<DataKeys<{ [K in keyof T]: T[K] | undefined }>>)
-    : undefined;
-
-  const deferredAccessorMap = multi
-    ? (Object.fromEntries(
-        typedKeys(source()).map((key) => [
-          `${String(key)}Data`,
-          () => lastResolvedValue()?.[key],
-        ]),
-      ) as AccessorMap<DataKeys<{ [K in keyof T]: T[K] }>>)
-    : undefined;
+  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 =>
@@ -227,16 +179,14 @@ function AsyncContent<T extends QueryMapping>(props: Props<T>): JSXElement {
                   {(_) =>
                     // oxlint-disable-next-line typescript/no-explicit-any
                     (props.children as (data: any) => JSXElement)(
-                      multi ? deferredAccessorMap : lastResolvedValue,
+                      deferredAccessorMap,
                     )
                   }
                 </Show>
               }
             >
               {/* oxlint-disable-next-line typescript/no-explicit-any */}
-              {(props.children as (data: any) => JSXElement)(
-                multi ? eagerAccessorMap : value,
-              )}
+              {(props.children as (data: any) => JSXElement)(eagerAccessorMap)}
             </Show>
           </>
         }
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 475d3e0f26cc..4e67e4e8d28e 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -64,18 +64,27 @@ export function AboutPage(): JSXElement {
       <section>
         <AsyncContent
           alwaysShowContent
-          query={typingStats}
+          queries={{ typingStats }}
           errorMessage="Failed to get global typing stats"
         >
-          {(data) => {
+          {({ typingStatsData }) => {
             return (
               <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
                   }
                 >
@@ -95,20 +104,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,
@@ -171,7 +180,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>
             </>
           )}
@@ -405,17 +415,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>
@@ -428,17 +438,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 c7c7f4859a53..43b36368ab29 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -170,13 +170,15 @@ 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={{ config: serverConfigurationQuery }}>
+            {({ configData }) => (
               <Sidebar
                 selection={getSelection}
                 onSelect={onSelectionChange}
-                validModeRules={config().dailyLeaderboards.validModeRules ?? []}
-                connectionsEnabled={config().connections.enabled}
+                validModeRules={
+                  configData().dailyLeaderboards.validModeRules ?? []
+                }
+                connectionsEnabled={configData().connections.enabled}
               />
             )}
           </AsyncContent>
@@ -229,14 +231,14 @@ export function LeaderboardPage(): JSXElement {
           </Show>
 
           <AsyncContent
-            query={dataQuery}
+            queries={{ data: dataQuery }}
             loader={
               <div class="flex justify-center pt-4 text-4xl">
                 <LoadingCircle />
               </div>
             }
           >
-            {(data) => (
+            {({ dataData }) => (
               <div>
                 <div
                   class={cn(
@@ -250,7 +252,7 @@ export function LeaderboardPage(): JSXElement {
                       dataQuery.isFetching ||
                       dataQuery.isRefetching
                     }
-                    lastPage={Math.ceil((data()?.count ?? 0) / pageSize)}
+                    lastPage={Math.ceil((dataData()?.count ?? 0) / pageSize)}
                     userPage={userPage()}
                     currentPage={getPage()}
                     onPageChange={setPage}
@@ -262,7 +264,7 @@ export function LeaderboardPage(): JSXElement {
                 <div>
                   <Table
                     type={getSelection().type === "weekly" ? "xp" : "speed"}
-                    entries={data()?.entries ?? []}
+                    entries={dataData()?.entries ?? []}
                     friendsOnly={getSelection().friendsOnly}
                     scrollToUser={scrollToUser}
                     onScrolledToUser={() => setScrollToUser(false)}
@@ -271,7 +273,7 @@ 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((dataData()?.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 6ab257a85ccd..af0b231625a3 100644
--- a/frontend/src/ts/components/pages/profile/ProfilePage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfilePage.tsx
@@ -20,8 +20,8 @@ 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={{ profile: profileQuery }} ignoreError={true}>
+          {({ profileData }) => <UserProfile profile={profileData()} />}
         </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 8d2829f4f09d..98bd66d08e8a 100644
--- a/frontend/src/ts/components/popups/alerts/Inbox.tsx
+++ b/frontend/src/ts/components/popups/alerts/Inbox.tsx
@@ -117,10 +117,10 @@ export function Inbox(): JSXElement {
       }
       body={
         <AsyncContent
-          collection={inboxQuery}
+          collections={{ inbox: inboxQuery }}
           loader={<LoadingCircle class="place-self-center text-lg" />}
         >
-          {(inbox) => (
+          {({ inboxData }) => (
             <>
               <Show when={inboxQuery().some((it) => it.status === "unclaimed")}>
                 <Button
@@ -149,7 +149,7 @@ export function Inbox(): JSXElement {
               </Show>
 
               <For
-                each={inbox()}
+                each={inboxData()}
                 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 aa7418b2c4f0..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 a5187e1e21025902303332fe93061a866da86a33 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 22:56:25 +0200
Subject: [PATCH 05/15] renames

---
 .../pages/leaderboard/LeaderboardPage.tsx     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 43b36368ab29..89e17e7f85a5 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,
@@ -193,26 +193,26 @@ export function LeaderboardPage(): JSXElement {
           />
 
           <Show
-            when={isAuthenticated() && !dataQuery.isLoading}
+            when={isAuthenticated() && !entriesQuery.isLoading}
             fallback={<Separator />}
           >
             <AsyncContent
               queries={{
-                data: dataQuery,
+                entries: entriesQuery,
                 rank: rankQuery,
                 config: serverConfigurationQuery,
               }}
               alwaysShowContent
               errorClass="rounded bg-sub-alt p-4"
             >
-              {({ dataData, rankData, configData }) => (
+              {({ entriesData, rankData, configData }) => (
                 <UserRank
                   type={getSelection().type === "weekly" ? "xp" : "speed"}
                   data={rankData()}
                   friendsOnly={getSelection().friendsOnly}
-                  total={dataData()?.count}
+                  total={entriesData()?.count}
                   minWpm={(() => {
-                    const d = dataData();
+                    const d = entriesData();
                     return d && "minWpm" in d
                       ? (d.minWpm as number)
                       : undefined;
@@ -231,7 +231,7 @@ export function LeaderboardPage(): JSXElement {
           </Show>
 
           <AsyncContent
-            queries={{ data: dataQuery }}
+            queries={{ data: entriesQuery }}
             loader={
               <div class="flex justify-center pt-4 text-4xl">
                 <LoadingCircle />
@@ -248,9 +248,9 @@ 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((dataData()?.count ?? 0) / pageSize)}
                     userPage={userPage()}

From 39204eb4011f8c425e09fb358fff2bb7b9d8bece Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 23:03:35 +0200
Subject: [PATCH 06/15] rename

---
 .../pages/leaderboard/LeaderboardPage.tsx          | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 89e17e7f85a5..73ba5e28a4a3 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -231,14 +231,14 @@ export function LeaderboardPage(): JSXElement {
           </Show>
 
           <AsyncContent
-            queries={{ data: entriesQuery }}
+            queries={{ entriesQuery }}
             loader={
               <div class="flex justify-center pt-4 text-4xl">
                 <LoadingCircle />
               </div>
             }
           >
-            {({ dataData }) => (
+            {({ entriesQueryData }) => (
               <div>
                 <div
                   class={cn(
@@ -252,7 +252,9 @@ export function LeaderboardPage(): JSXElement {
                       entriesQuery.isFetching ||
                       entriesQuery.isRefetching
                     }
-                    lastPage={Math.ceil((dataData()?.count ?? 0) / pageSize)}
+                    lastPage={Math.ceil(
+                      (entriesQueryData()?.count ?? 0) / pageSize,
+                    )}
                     userPage={userPage()}
                     currentPage={getPage()}
                     onPageChange={setPage}
@@ -264,7 +266,7 @@ export function LeaderboardPage(): JSXElement {
                 <div>
                   <Table
                     type={getSelection().type === "weekly" ? "xp" : "speed"}
-                    entries={dataData()?.entries ?? []}
+                    entries={entriesQueryData()?.entries ?? []}
                     friendsOnly={getSelection().friendsOnly}
                     scrollToUser={scrollToUser}
                     onScrolledToUser={() => setScrollToUser(false)}
@@ -273,7 +275,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((dataData()?.count ?? 0) / pageSize)}
+                    lastPage={Math.ceil(
+                      (entriesQueryData()?.count ?? 0) / pageSize,
+                    )}
                     currentPage={getPage()}
                     onPageChange={setPage}
                     onScrollToUser={setScrollToUser}

From b95864fefef00c7865bc6035f7f03bae2c0454dc Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 23:04:17 +0200
Subject: [PATCH 07/15] rename

---
 frontend/src/ts/components/pages/profile/ProfilePage.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/pages/profile/ProfilePage.tsx b/frontend/src/ts/components/pages/profile/ProfilePage.tsx
index af0b231625a3..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 queries={{ profile: profileQuery }} ignoreError={true}>
-          {({ profileData }) => <UserProfile profile={profileData()} />}
+        <AsyncContent queries={{ profileQuery }} ignoreError={true}>
+          {({ profileQueryData }) => (
+            <UserProfile profile={profileQueryData()} />
+          )}
         </AsyncContent>
         <Show when={profileQuery.isError}>
           <div class="flex items-baseline gap-2 text-error">

From 103aa0360425dcb896ac2da1b998c0e0794c2a81 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 23:06:43 +0200
Subject: [PATCH 08/15] rename

---
 frontend/src/ts/components/popups/alerts/Inbox.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/components/popups/alerts/Inbox.tsx b/frontend/src/ts/components/popups/alerts/Inbox.tsx
index 98bd66d08e8a..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
-          collections={{ inbox: inboxQuery }}
+          collections={{ inboxQuery }}
           loader={<LoadingCircle class="place-self-center text-lg" />}
         >
-          {({ inboxData }) => (
+          {({ 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={inboxData()}
+                each={inboxQueryData()}
                 fallback={<div class="place-self-center">Nothing to show</div>}
               >
                 {(entry) => <Entry entry={entry} mutate={mutate} />}

From a03a6ee070b090af7face112364b71eaf91288bb Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 23:08:55 +0200
Subject: [PATCH 09/15] no return

---
 .../src/ts/components/pages/AboutPage.tsx     | 57 +++++++++----------
 1 file changed, 26 insertions(+), 31 deletions(-)

diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 4e67e4e8d28e..6dd0cf73855e 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -67,38 +67,33 @@ export function AboutPage(): JSXElement {
           queries={{ typingStats }}
           errorMessage="Failed to get global typing stats"
         >
-          {({ typingStatsData }) => {
-            return (
-              <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-                <For
-                  each={
+          {({ typingStatsData }) => (
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              <For
+                each={
+                  [
                     [
-                      [
-                        "total tests started",
-                        () => typingStatsData()?.testsStarted,
-                      ],
-                      [
-                        "total typing time",
-                        () => typingStatsData()?.timeTyping,
-                      ],
-                      [
-                        "total tests completed",
-                        () => typingStatsData()?.testsCompleted,
-                      ],
-                    ] as const
-                  }
-                >
-                  {([title, stat]) => (
-                    <div class="text-center">
-                      <div class="text-sub">{title}</div>
-                      <div class="text-5xl">{stat()?.text ?? "-"}</div>
-                      <div class="text-xl">{stat()?.subText ?? "-"}</div>
-                    </div>
-                  )}
-                </For>
-              </div>
-            );
-          }}
+                      "total tests started",
+                      () => typingStatsData()?.testsStarted,
+                    ],
+                    ["total typing time", () => typingStatsData()?.timeTyping],
+                    [
+                      "total tests completed",
+                      () => typingStatsData()?.testsCompleted,
+                    ],
+                  ] as const
+                }
+              >
+                {([title, stat]) => (
+                  <div class="text-center">
+                    <div class="text-sub">{title}</div>
+                    <div class="text-5xl">{stat()?.text ?? "-"}</div>
+                    <div class="text-xl">{stat()?.subText ?? "-"}</div>
+                  </div>
+                )}
+              </For>
+            </div>
+          )}
         </AsyncContent>
       </section>
       <section class="h-48 w-full">

From 80beefe0122bbb3a36feaaf52acc815722a10285 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 23:19:01 +0200
Subject: [PATCH 10/15] your wish is my command

---
 .../components/pages/leaderboard/LeaderboardPage.tsx  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 73ba5e28a4a3..4da9d77ad272 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -170,15 +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 queries={{ config: serverConfigurationQuery }}>
-            {({ configData }) => (
+          <AsyncContent queries={{ serverConfigurationQuery }}>
+            {({ serverConfigurationQueryData }) => (
               <Sidebar
                 selection={getSelection}
                 onSelect={onSelectionChange}
                 validModeRules={
-                  configData().dailyLeaderboards.validModeRules ?? []
+                  serverConfigurationQueryData().dailyLeaderboards
+                    .validModeRules ?? []
+                }
+                connectionsEnabled={
+                  serverConfigurationQueryData().connections.enabled
                 }
-                connectionsEnabled={configData().connections.enabled}
               />
             )}
           </AsyncContent>

From 6728b626d8dd1945f017109efe9d27a43b1f0a68 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 2 May 2026 23:19:50 +0200
Subject: [PATCH 11/15] rename

---
 .../pages/leaderboard/LeaderboardPage.tsx     | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 4da9d77ad272..89443afa0568 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -201,32 +201,39 @@ export function LeaderboardPage(): JSXElement {
           >
             <AsyncContent
               queries={{
-                entries: entriesQuery,
-                rank: rankQuery,
-                config: serverConfigurationQuery,
+                entriesQuery,
+                rankQuery,
+                serverConfigurationQuery,
               }}
               alwaysShowContent
               errorClass="rounded bg-sub-alt p-4"
             >
-              {({ entriesData, rankData, configData }) => (
+              {({
+                entriesQueryData,
+                rankQueryData,
+                serverConfigurationQueryData,
+              }) => (
                 <UserRank
                   type={getSelection().type === "weekly" ? "xp" : "speed"}
-                  data={rankData()}
+                  data={rankQueryData()}
                   friendsOnly={getSelection().friendsOnly}
-                  total={entriesData()?.count}
+                  total={entriesQueryData()?.count}
                   minWpm={(() => {
-                    const d = entriesData();
+                    const d = entriesQueryData();
                     return d && "minWpm" in d
                       ? (d.minWpm as number)
                       : undefined;
                   })()}
                   memoryDifference={getLbMemoryDifference(
                     getSelection(),
-                    rankData()?.rank,
+                    rankQueryData()?.rank,
                   )}
                   isLbOptOut={getSnapshot()?.lbOptOut ?? false}
                   isBanned={getSnapshot()?.banned ?? false}
-                  minTimeTyping={configData()?.leaderboards.minTimeTyping ?? 0}
+                  minTimeTyping={
+                    serverConfigurationQueryData()?.leaderboards
+                      .minTimeTyping ?? 0
+                  }
                   userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
                 />
               )}

From 665ae907a11fc8b394d8108aaa116edff1a4ac12 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 3 May 2026 09:36:28 +0200
Subject: [PATCH 12/15] refactor: simplify minWpm calculation in UserRank
 component

---
 .../pages/leaderboard/LeaderboardPage.tsx     | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 89443afa0568..ffb05ddda3ec 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -212,31 +212,33 @@ export function LeaderboardPage(): JSXElement {
                 entriesQueryData,
                 rankQueryData,
                 serverConfigurationQueryData,
-              }) => (
-                <UserRank
-                  type={getSelection().type === "weekly" ? "xp" : "speed"}
-                  data={rankQueryData()}
-                  friendsOnly={getSelection().friendsOnly}
-                  total={entriesQueryData()?.count}
-                  minWpm={(() => {
-                    const d = entriesQueryData();
-                    return d && "minWpm" in d
-                      ? (d.minWpm as number)
-                      : undefined;
-                  })()}
-                  memoryDifference={getLbMemoryDifference(
-                    getSelection(),
-                    rankQueryData()?.rank,
-                  )}
-                  isLbOptOut={getSnapshot()?.lbOptOut ?? false}
-                  isBanned={getSnapshot()?.banned ?? false}
-                  minTimeTyping={
-                    serverConfigurationQueryData()?.leaderboards
-                      .minTimeTyping ?? 0
-                  }
-                  userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
-                />
-              )}
+              }) => {
+                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>
 

From 3c7ffcaaeaca3e24771178193d8e176f7d6e902d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 3 May 2026 09:43:46 +0200
Subject: [PATCH 13/15] add key change detection in AsyncContent component

---
 .../src/ts/components/common/AsyncContent.tsx   | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index b64849dcfd65..f4a8765a8c5c 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,
@@ -136,6 +137,22 @@ function AsyncContent<T extends Record<string, unknown>>(
 
   // 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) => [

From 4697142ec8d3a58f5a5a4dd8f82019fc18a74a60 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 3 May 2026 10:26:56 +0200
Subject: [PATCH 14/15] fix: update loader visibility logic to show on initial
 load or query key change

---
 frontend/src/ts/components/common/AsyncContent.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index f4a8765a8c5c..1309377dc4ca 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -177,11 +177,9 @@ function AsyncContent<T extends Record<string, unknown>>(
       <div class={props.errorClass}>{handleError(err)}</div>
     );
 
-  // Only show loader on initial load, not on refetches
+  // Show loader on initial load or when the query key changed (no cached data)
   const showLoader = (): boolean =>
-    isLoading() &&
-    !props.alwaysShowContent &&
-    lastResolvedValue() === undefined;
+    isLoading() && !props.alwaysShowContent && !allResolved(value());
 
   return (
     <ErrorBoundary fallback={props.ignoreError ? undefined : errorText}>

From 15c107aab7adbf9d9e76f167f37ce20cdfc1b881 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 3 May 2026 10:27:20 +0200
Subject: [PATCH 15/15] cleanup AsyncContent test

---
 .../components/common/AsyncContent.spec.tsx   | 50 +------------------
 1 file changed, 1 insertion(+), 49 deletions(-)

diff --git a/frontend/__tests__/components/common/AsyncContent.spec.tsx b/frontend/__tests__/components/common/AsyncContent.spec.tsx
index a3ef45ce3dd7..39328af98d2a 100644
--- a/frontend/__tests__/components/common/AsyncContent.spec.tsx
+++ b/frontend/__tests__/components/common/AsyncContent.spec.tsx
@@ -159,33 +159,10 @@ describe("AsyncContent", () => {
           retry: 0,
         }));
 
-        if (options?.alwaysShowContent) {
-          return (
-            <AsyncContent
-              queries={{ result: myQuery }}
-              {...(options as Props<{ result: string }>)}
-              alwaysShowContent
-            >
-              {({ resultData }) => (
-                <>
-                  static content
-                  <Show
-                    when={resultData() !== undefined}
-                    fallback={<div>no data</div>}
-                  >
-                    <div data-testid="content">{resultData()}</div>
-                  </Show>
-                </>
-              )}
-            </AsyncContent>
-          );
-        }
-
         return (
           <AsyncContent
             queries={{ result: myQuery }}
-            {...(options as Props<{ result: string }>)}
-            alwaysShowContent={false}
+            {...(options as Props<{ result: string | undefined }>)}
           >
             {({ resultData }) => (
               <>
@@ -380,35 +357,10 @@ describe("AsyncContent", () => {
 
         type Q = { first: string | undefined; second: string | undefined };
 
-        if (options?.alwaysShowContent) {
-          return (
-            <AsyncContent
-              queries={{ first: firstQuery, second: secondQuery }}
-              {...(options as Props<Q>)}
-              alwaysShowContent
-            >
-              {({ firstData, secondData }) => (
-                <>
-                  <Show
-                    when={
-                      firstData() !== undefined && secondData() !== undefined
-                    }
-                    fallback={<div>no data</div>}
-                  >
-                    <div data-testid="first">{firstData()}</div>
-                    <div data-testid="second">{secondData()}</div>
-                  </Show>
-                </>
-              )}
-            </AsyncContent>
-          );
-        }
-
         return (
           <AsyncContent
             queries={{ first: firstQuery, second: secondQuery }}
             {...(options as Props<Q>)}
-            alwaysShowContent={false}
           >
             {({ firstData, secondData }) => (
               <>