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>
   );