From b5ff1c407c30341e8bdc05dab866d9696f8e202c Mon Sep 17 00:00:00 2001
From: Bastiaan <bas@strootje.com>
Date: Fri, 29 May 2026 20:13:29 +0200
Subject: [PATCH] fix: better suspense

---
 src/routes/index.tsx | 44 ++++++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index deb3b34..2b0fd20 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,20 +1,22 @@
+import * as clientDb from "@scope/db/client";
 import { createFileRoute } from "@tanstack/solid-router";
-import { createSignal, Index } from "solid-js";
+import { createSignal, Index, Show, Suspense } from "solid-js";
 import { AppHeader } from "../components/app-header.tsx";
+import { MissedItems } from "../components/missed-items.tsx";
 import { Swiper } from "../components/swiper.tsx";
 import * as itemFns from "../functions/item.queries.ts";
 
 export const Route = createFileRoute("/")({
   component: () => {
     const [selectedDate, setSelectedDate] = createSignal<Temporal.PlainDate>(Temporal.Now.plainDateISO());
-    // const daysUntilToday = () => Temporal.Now.plainDateISO().until(selectedDate()).days;
+    const daysUntilToday = () => Temporal.Now.plainDateISO().until(selectedDate()).days;
 
-    // const today = () => Temporal.Now.plainDateISO();
-    // const items = clientDb.useLiveQuery(({ db }) => {
-    //   return db.selectFrom("item")
-    //     .where("dueAt", "=", selectedDate().toString())
-    //     .selectAll();
-    // });
+    const today = () => Temporal.Now.plainDateISO();
+    const items = clientDb.useLiveQuery(({ db }) => {
+      return db.selectFrom("item")
+        .where("dueAt", "=", selectedDate().toString())
+        .selectAll();
+    });
 
     const addItem = async () => {
       console.log("pressed the button..");
@@ -25,20 +27,22 @@ export const Route = createFileRoute("/")({
       <div class="flex min-h-dvh flex-col gap-4">
         <AppHeader onSelectedDateChanged={setSelectedDate} />
 
-        {
-          /* <Show when={daysUntilToday() >= 0}>
-          <MissedItems today={today} />
-        </Show> */
-        }
+        <Suspense>
+          <Show when={daysUntilToday() >= 0}>
+            <MissedItems today={today} />
+          </Show>
+        </Suspense>
 
         <div class="flex flex-col gap-1">
-          <Index each={[{ title: "testing" }]}>
-            {(item) => (
-              <Swiper class="b-1 b-stone-500 mx-1 flex flex-col gap-1 rounded-xl bg-white p-2">
-                <span>{item().title}</span>
-              </Swiper>
-            )}
-          </Index>
+          <Suspense>
+            <Index each={items()}>
+              {(item) => (
+                <Swiper class="b-1 b-stone-500 mx-1 flex flex-col gap-1 rounded-xl bg-white p-2">
+                  <span>{item().title}</span>
+                </Swiper>
+              )}
+            </Index>
+          </Suspense>
         </div>
 
         <button class="p-4 bg-red" type="button" onClick={addItem}>Add randon item</button>
-- 
2.51.2