perf: offload long running tasks to workers, preloading dm page data

src/pages/dm/dm-id.tsx

@@ -1,7 +1,7 @@
-import { type Component, createMemo, createResource } from "solid-js";
-import type { RouteSectionProps } from "@solidjs/router";
+import { Suspense, type Component } from "solid-js";
+import { createAsync, type RoutePreloadFunc, type RouteSectionProps } from "@solidjs/router";
 
-import { dmPartnerRecipientQuery, SELF_ID, threadMostUsedWordsQuery, threadSentMessagesOverviewQuery } from "~/db";
+import { dmPartnerRecipientQuery, threadMostUsedWordsQuery, threadSentMessagesOverviewQuery } from "~/db-queries";
 import { getNameFromRecipient } from "~/lib/get-name-from-recipient";
 import { Heading } from "~/components/ui/heading";
 import { Grid } from "~/components/ui/grid";
@@ -15,13 +15,13 @@ import { DmMessagesPerRecipient } from "./dm-messages-per-recipients";
 import { DmMessagesPerWeekday } from "./dm-messages-per-weekday";
 import type { MessageOverview } from "~/types";
 import { createMessageStatsSources } from "~/lib/messages";
+import { SELF_ID } from "~/db";
+import { Flex } from "~/components/ui/flex";
 
-export const DmId: Component<RouteSectionProps> = (props) => {
-  const dmId = () => Number(props.params.dmid);
-
+const getDmIdData = (dmId: number) => {
   // the other person in the chat with name and id
-  const [dmPartner] = createResource(async () => {
-    const dmPartner = await dmPartnerRecipientQuery(dmId());
+  const dmPartner = createAsync(async () => {
+    const dmPartner = await dmPartnerRecipientQuery(dmId);
 
     if (dmPartner) {
       return {
@@ -35,8 +35,8 @@ export const DmId: Component<RouteSectionProps> = (props) => {
     }
   });
 
-  const [dmMessagesOverview] = createResource<MessageOverview | undefined>(async () => {
-    const dmMessageOverview = await threadSentMessagesOverviewQuery(dmId());
+  const dmMessagesOverview = createAsync<MessageOverview | undefined>(async () => {
+    const dmMessageOverview = await threadSentMessagesOverviewQuery(dmId);
     if (dmMessageOverview) {
       return dmMessageOverview.map((row) => {
         return {
@@ -47,7 +47,7 @@ export const DmId: Component<RouteSectionProps> = (props) => {
     }
   });
 
-  const [mostUsedWordCounts] = createResource(async () => threadMostUsedWordsQuery(dmId(), 300));
+  const mostUsedWordCounts = createAsync(async () => threadMostUsedWordsQuery(dmId, 300));
 
   const recipients = () => {
     const currentDmPartner = dmPartner();
@@ -63,45 +63,87 @@ export const DmId: Component<RouteSectionProps> = (props) => {
     }
   };
 
-  const dmMessageStats = createMemo(() => {
+  const dmMessageStats = createAsync(async () => {
     const currentDmMessagesOverview = dmMessagesOverview();
     const currentRecipients = recipients();
 
     if (currentDmMessagesOverview && currentRecipients) {
-      return createMessageStatsSources(currentDmMessagesOverview, currentRecipients);
+      return await createMessageStatsSources(dmId, currentDmMessagesOverview, currentRecipients);
     }
   });
 
+  return {
+    dmPartner,
+    dmMessagesOverview,
+    mostUsedWordCounts,
+    recipients,
+    dmMessageStats,
+  };
+};
+
+export const preloadDmId: RoutePreloadFunc = (props) => {
+  void getDmIdData(Number(props.params.dmid));
+};
+
+export const DmId: Component<RouteSectionProps> = (props) => {
+  const { dmPartner, dmMessagesOverview, mostUsedWordCounts, recipients, dmMessageStats } = getDmIdData(
+    Number(props.params.dmid),
+  );
+
   return (
     <>
       <Title>Dm with {dmPartner()?.name}</Title>
       <div class="flex flex-col items-center">
         <Heading level={1}>DM with {dmPartner()?.name}</Heading>
         <Heading level={2}>Chat timeline</Heading>
-        <DmMessagesPerDate dateStats={dmMessageStats()?.date} recipients={recipients()} />
+        <Suspense
+          fallback={
+            <Flex alignItems="center" justifyContent="center" class="h-64">
+              <p class="text-4xl">Loading...</p>
+            </Flex>
+          }
+        >
+          <DmMessagesPerDate dateStats={dmMessageStats()?.date} recipients={recipients()} />
+        </Suspense>
         <DmOverview messages={dmMessagesOverview()} />
         <Heading level={2}>Messages per</Heading>
 
-        <Grid cols={1} colsMd={2} class="gap-x-16 gap-y-16">
-          <div>
-            <Heading level={3}>Person</Heading>
-            <DmMessagesPerRecipient personStats={dmMessageStats()?.person} recipients={recipients()} />
-          </div>
-          <div>
-            <Heading level={3}>Daytime</Heading>
-            <DmMessagesPerDaytime daytimeStats={dmMessageStats()?.daytime} recipients={recipients()} />
-          </div>
-          <div>
-            <Heading level={3}>Month</Heading>
-            <DmMessagesPerMonth monthStats={dmMessageStats()?.month} recipients={recipients()} />
-          </div>
-          <div>
-            <Heading level={3}>Weekday</Heading>
-            <DmMessagesPerWeekday weekdayStats={dmMessageStats()?.weekday} recipients={recipients()} />
-          </div>
-        </Grid>
+        <Suspense
+          fallback={
+            <Flex alignItems="center" justifyContent="center" class="h-64">
+              <p class="text-4xl">Loading...</p>
+            </Flex>
+          }
+        >
+          <Grid cols={1} colsMd={2} class="gap-x-16 gap-y-16">
+            <div>
+              <Heading level={3}>Person</Heading>
+              <DmMessagesPerRecipient personStats={dmMessageStats()?.person} recipients={recipients()} />
+            </div>
+            <div>
+              <Heading level={3}>Daytime</Heading>
+              <DmMessagesPerDaytime daytimeStats={dmMessageStats()?.daytime} recipients={recipients()} />
+            </div>
+            <div>
+              <Heading level={3}>Month</Heading>
+              <DmMessagesPerMonth monthStats={dmMessageStats()?.month} recipients={recipients()} />
+            </div>
+            <div>
+              <Heading level={3}>Weekday</Heading>
+              <DmMessagesPerWeekday weekdayStats={dmMessageStats()?.weekday} recipients={recipients()} />
+            </div>
+          </Grid>
+        </Suspense>
         <Heading level={2}>Word cloud</Heading>
-        <DmWordCloud wordCounts={mostUsedWordCounts()} />
+        <Suspense
+          fallback={
+            <Flex alignItems="center" justifyContent="center" class="h-64">
+              <p class="text-4xl">Loading...</p>
+            </Flex>
+          }
+        >
+          <DmWordCloud wordCounts={mostUsedWordCounts()} />
+        </Suspense>
       </div>
     </>
   );

src/pages/dm/dm-wordcloud.tsx

@@ -1,7 +1,7 @@
 import type { ChartData } from "chart.js";
 import { Show, type Accessor, type Component } from "solid-js";
 import { WordCloudChart } from "~/components/ui/charts";
-import type { threadMostUsedWordsQuery } from "~/db";
+import type { threadMostUsedWordsQuery } from "~/db-queries";
 
 const maxWordSize = 100;
 

src/pages/home.tsx

@@ -1,10 +1,10 @@
 import { createSignal, Show, type Component, type JSX } from "solid-js";
 import { type RouteSectionProps, useNavigate } from "@solidjs/router";
 
-import { setDb, SQL } from "~/db";
 import { Portal } from "solid-js/web";
 import { Flex } from "~/components/ui/flex";
 import { Title } from "@solidjs/meta";
+import { setDb, SQL } from "~/db";
 
 export const Home: Component<RouteSectionProps> = () => {
   const [isLoadingDb, setIsLoadingDb] = createSignal(false);

src/pages/index.tsx

@@ -2,6 +2,7 @@ import { lazy } from "solid-js";
 
 export { Home } from "./home";
 
+export { preloadDmId } from "./dm/dm-id";
 export const GroupId = lazy(() => import("./group/group-id"));
 export const DmId = lazy(() => import("./dm/dm-id"));
 

src/pages/overview/index.tsx

@@ -1,11 +1,12 @@
 import { type Component, createResource, Show } from "solid-js";
 import type { RouteSectionProps } from "@solidjs/router";
 
-import { allThreadsOverviewQuery, overallSentMessagesQuery, SELF_ID } from "~/db";
+import { allThreadsOverviewQuery, overallSentMessagesQuery } from "~/db-queries";
 
 import { OverviewTable, type RoomOverview } from "./overview-table";
 import { getNameFromRecipient } from "~/lib/get-name-from-recipient";
 import { Title } from "@solidjs/meta";
+import { SELF_ID } from "~/db";
 
 export const Overview: Component<RouteSectionProps> = () => {
   const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID));

src/pages/overview/overview-table.tsx

@@ -1,5 +1,5 @@
 import { type Component, createSignal, For, Match, Show, Switch } from "solid-js";
-import { useNavigate } from "@solidjs/router";
+import { useNavigate, usePreloadRoute } from "@solidjs/router";
 
 import {
   type ColumnFiltersState,
@@ -191,6 +191,8 @@ interface OverviewTableProps {
 }
 
 export const OverviewTable = (props: OverviewTableProps) => {
+  const preload = usePreloadRoute();
+
   const [sorting, setSorting] = createSignal<SortingState>([
     {
       id: "messageCount",
@@ -314,6 +316,26 @@ export const OverviewTable = (props: OverviewTableProps) => {
                 <TableRow
                   class="cursor-pointer [&:last-of-type>td:first-of-type]:rounded-bl-md [&:last-of-type>td:last-of-type]:rounded-br-md"
                   data-state={row.getIsSelected() && "selected"}
+                  onPointerEnter={(event) => {
+                    const threadId = row.original.threadId;
+                    const isGroup = row.original.isGroup;
+
+                    const preloadTimeout = setTimeout(() => {
+                      preload(`/${isGroup ? "group" : "dm"}/${threadId.toString()}`, {
+                        preloadData: true,
+                      });
+                    }, 20);
+
+                    event.currentTarget.addEventListener(
+                      "pointerout",
+                      () => {
+                        clearTimeout(preloadTimeout);
+                      },
+                      {
+                        once: true,
+                      },
+                    );
+                  }}
                   onClick={() => {
                     const threadId = row.original.threadId;
                     const isGroup = row.original.isGroup;