From f6393c9a596f1dcdc21021a46689a6a07a0104ea Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Sun, 21 Sep 2025 15:54:24 +0100
Subject: [PATCH] suspending

---
 frontend/src/components/image/index.tsx |  16 +--
 frontend/src/pages/list/index.tsx       | 176 ++++++++++++------------
 2 files changed, 95 insertions(+), 97 deletions(-)

diff --git a/frontend/src/components/image/index.tsx b/frontend/src/components/image/index.tsx
index 76b24e0..bab59d6 100644
--- a/frontend/src/components/image/index.tsx
+++ b/frontend/src/components/image/index.tsx
@@ -1,4 +1,4 @@
-import { Component, createResource, createSignal } from "solid-js";
+import { Component, createResource, createSignal, Suspense } from "solid-js";
 import { base, getAccessToken } from "../../network";
 import { A } from "@solidjs/router";
 import { Dialog } from "@kobalte/core";
@@ -14,12 +14,12 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
     const [accessToken] = createResource(getAccessToken);
 
     return (
-        <>
+        <Suspense fallback={<></>}>
             <div class="relative w-full flex justify-center h-[300px]">
                 <A href={`/image/${props.ID}`} class="flex w-full">
                     <img
                         class="flex w-full object-cover rounded-xl"
-                        src={`${base}/images/${props.ID}?token=${accessToken}`}
+                        src={`${base}/images/${props.ID}?token=${accessToken()}`}
                     />
                 </A>
                 <button
@@ -54,7 +54,7 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
                     </Dialog.Content>
                 </Dialog.Portal>
             </Dialog.Root>
-        </>
+        </Suspense>
     );
 };
 
@@ -64,11 +64,7 @@ export const ImageComponent: Component<ImageComponentProps> = (props) => {
 export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
     const [isOpen, setIsOpen] = createSignal(false);
 
-    // TODO: make sure this is up to date. Put it behind a resource.
-    const accessToken = localStorage.getItem("access");
-    if (accessToken == null) {
-        return <>Ermm... Access token is not set :(</>
-    }
+    const [accessToken] = createResource(getAccessToken);
 
     return (
         <>
@@ -76,7 +72,7 @@ export const ImageComponentFullHeight: Component<ImageComponentProps> = (props)
                 <A href={`/image/${props.ID}`} class="flex w-full">
                     <img
                         class="flex w-full object-cover rounded-xl"
-                        src={`${base}/images/${props.ID}?token=${accessToken}`}
+                        src={`${base}/images/${props.ID}?token=${accessToken()}`}
                     />
                 </A>
                 <button
diff --git a/frontend/src/pages/list/index.tsx b/frontend/src/pages/list/index.tsx
index da510c0..d90402b 100644
--- a/frontend/src/pages/list/index.tsx
+++ b/frontend/src/pages/list/index.tsx
@@ -1,6 +1,6 @@
 import { useSearchImageContext } from "@contexts/SearchImageContext";
 import { useParams } from "@solidjs/router";
-import { Component, For, Show, createResource, createSignal } from "solid-js";
+import { Component, For, Show, Suspense, createResource, createSignal } from "solid-js";
 import { base, getAccessToken } from "../../network";
 import { Dialog } from "@kobalte/core";
 
@@ -52,100 +52,102 @@ export const List: Component = () => {
 
     const { lists, onDeleteImageFromStack } = useSearchImageContext();
 
-    const [] = createResource(getAccessToken);
+    const [accessToken] = createResource(getAccessToken);
 
     const list = () => lists().find((l) => l.ID === listId);
 
     return (
-        <Show when={list()} fallback="List could not be found">
-            {(l) => (
-                <div class="w-full h-full bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden">
-                    <div class="overflow-x-auto overflow-y-auto h-full">
-                        <table class="w-full min-w-full">
-                            <thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
-                                <tr>
-                                    <th class="px-6 py-4 text-left text-sm font-semibold text-neutral-900 border-r border-neutral-200 min-w-40">
-                                        Image
-                                    </th>
-                                    <For each={l().Schema.SchemaItems}>
-                                        {(item, index) => (
-                                            <th
-                                                class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
-                                                    l().Schema.SchemaItems
-                                                        .length -
-                                                    1
-                                                    ? "border-r border-neutral-200"
-                                                    : ""
+        <Suspense>
+            <Show when={list()} fallback="List could not be found">
+                {(l) => (
+                    <div class="w-full h-full bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden">
+                        <div class="overflow-x-auto overflow-y-auto h-full">
+                            <table class="w-full min-w-full">
+                                <thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
+                                    <tr>
+                                        <th class="px-6 py-4 text-left text-sm font-semibold text-neutral-900 border-r border-neutral-200 min-w-40">
+                                            Image
+                                        </th>
+                                        <For each={l().Schema.SchemaItems}>
+                                            {(item, index) => (
+                                                <th
+                                                    class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
+                                                        l().Schema.SchemaItems
+                                                            .length -
+                                                        1
+                                                        ? "border-r border-neutral-200"
+                                                        : ""
+                                                        }`}
+                                                >
+                                                    {item.Item}
+                                                </th>
+                                            )}
+                                        </For>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-neutral-200">
+                                    <For each={l().Images}>
+                                        {(image, rowIndex) => (
+                                            <tr
+                                                class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
+                                                    ? "bg-white"
+                                                    : "bg-neutral-25"
                                                     }`}
                                             >
-                                                {item.Item}
-                                            </th>
+                                                <td class="px-6 py-4 border-r border-neutral-200">
+                                                    <div class="flex items-center gap-2">
+                                                        <a
+                                                            href={`/image/${image.ImageID}`}
+                                                            class="w-32 h-24 flex justify-center rounded-lg overflow-hidden"
+                                                        >
+                                                            <img
+                                                                class="w-full h-full object-cover rounded-lg"
+                                                                src={`${base}/images/${image.ImageID}?token=${accessToken()}`}
+                                                                alt="List item"
+                                                            />
+                                                        </a>
+                                                        <DeleteButton onDelete={() => onDeleteImageFromStack(l().ID, image.ImageID)} />
+                                                    </div>
+                                                </td>
+                                                <For each={image.Items}>
+                                                    {(item, colIndex) => (
+                                                        <td
+                                                            class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
+                                                                image.Items.length -
+                                                                1
+                                                                ? "border-r border-neutral-200"
+                                                                : ""
+                                                                }`}
+                                                        >
+                                                            <div
+                                                                class="max-w-xs truncate"
+                                                                title={item.Value}
+                                                            >
+                                                                {item.Value}
+                                                            </div>
+                                                        </td>
+                                                    )}
+                                                </For>
+                                            </tr>
                                         )}
                                     </For>
-                                </tr>
-                            </thead>
-                            <tbody class="divide-y divide-neutral-200">
-                                <For each={l().Images}>
-                                    {(image, rowIndex) => (
-                                        <tr
-                                            class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
-                                                ? "bg-white"
-                                                : "bg-neutral-25"
-                                                }`}
-                                        >
-                                            <td class="px-6 py-4 border-r border-neutral-200">
-                                                <div class="flex items-center gap-2">
-                                                    <a
-                                                        href={`/image/${image.ImageID}`}
-                                                        class="w-32 h-24 flex justify-center rounded-lg overflow-hidden"
-                                                    >
-                                                        <img
-                                                            class="w-full h-full object-cover rounded-lg"
-                                                            src={`${base}/images/${image.ImageID}`}
-                                                            alt="List item"
-                                                        />
-                                                    </a>
-                                                    <DeleteButton onDelete={() => onDeleteImageFromStack(l().ID, image.ImageID)} />
-                                                </div>
-                                            </td>
-                                            <For each={image.Items}>
-                                                {(item, colIndex) => (
-                                                    <td
-                                                        class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
-                                                            image.Items.length -
-                                                            1
-                                                            ? "border-r border-neutral-200"
-                                                            : ""
-                                                            }`}
-                                                    >
-                                                        <div
-                                                            class="max-w-xs truncate"
-                                                            title={item.Value}
-                                                        >
-                                                            {item.Value}
-                                                        </div>
-                                                    </td>
-                                                )}
-                                            </For>
-                                        </tr>
-                                    )}
-                                </For>
-                            </tbody>
-                        </table>
-                        <Show when={l().Images.length === 0}>
-                            <div class="px-6 py-12 text-center text-neutral-500">
-                                <p class="text-lg">
-                                    No images in this list yet
-                                </p>
-                                <p class="text-sm mt-1">
-                                    Images will appear here once added to the
-                                    list
-                                </p>
-                            </div>
-                        </Show>
+                                </tbody>
+                            </table>
+                            <Show when={l().Images.length === 0}>
+                                <div class="px-6 py-12 text-center text-neutral-500">
+                                    <p class="text-lg">
+                                        No images in this list yet
+                                    </p>
+                                    <p class="text-sm mt-1">
+                                        Images will appear here once added to the
+                                        list
+                                    </p>
+                                </div>
+                            </Show>
+                        </div>
                     </div>
-                </div>
-            )}
-        </Show>
+                )}
+            </Show>
+        </Suspense>
     );
 };