expand async content to handle loadingStore

Author: fehmer

frontend/src/ts/components/common/AsyncContent.tsx

@@ -2,26 +2,47 @@ import { ErrorBoundary, JSXElement, Resource, Show, Suspense } from "solid-js";
 import { createErrorMessage } from "../../utils/misc";
 import * as Notifications from "../../elements/notifications";
 import { Conditional } from "./Conditional";
+import { LoadingStore } from "../../signals/util/loadingStore";
 
 export default function AsyncContent<T>(
   props: {
-    resource: Resource<T | undefined>;
     errorMessage?: string;
   } & (
     | {
-        alwaysShowContent?: never;
-        children: (data: T) => JSXElement;
+        resource: Resource<T | undefined>;
+        loadingStore?: never;
       }
     | {
-        alwaysShowContent: true;
-        showLoader?: true;
-        children: (data: T | undefined) => JSXElement;
+        loadingStore: LoadingStore<T | undefined>;
+        resource?: never;
       }
-  ),
+  ) &
+    (
+      | {
+          alwaysShowContent?: never;
+          children: (data: T) => JSXElement;
+        }
+      | {
+          alwaysShowContent: true;
+          showLoader?: true;
+          children: (data: T | undefined) => JSXElement;
+        }
+    ),
 ): JSXElement {
+  const source =
+    props.resource !== undefined
+      ? {
+          value: () => props.resource(),
+          loading: () => props.resource.loading,
+        }
+      : {
+          value: () => props.loadingStore.store,
+          loading: () => props.loadingStore.state().loading,
+        };
+
   const value = () => {
     try {
-      return props.resource();
+      return source.value();
     } catch (err) {
       const message = createErrorMessage(
         err,
@@ -47,7 +68,7 @@ export default function AsyncContent<T>(
         };
         return (
           <>
-            <Show when={p.showLoader && props.resource.loading}>
+            <Show when={p.showLoader && source.loading()}>
               <div class="preloader">
                 <i class="fas fa-fw fa-spin fa-circle-notch"></i>
               </div>
@@ -68,9 +89,9 @@ export default function AsyncContent<T>(
             }
           >
             <Show
-              when={props.resource() !== null && props.resource() !== undefined}
+              when={source.value() !== null && source.value() !== undefined}
             >
-              {props.children(props.resource() as T)}
+              {props.children(source.value() as T)}
             </Show>
           </Suspense>
         </ErrorBoundary>

frontend/src/ts/components/pages/AboutPage.tsx

@@ -45,21 +45,20 @@ export function AboutPage(): JSXElement {
         <Button onClick={() => connections.reset()} text="reset" />
       </Show>
 
-      <Show when={connections.state().loading}>... is loading</Show>
-      <Show when={connections.state().error !== undefined}>
-        oh oh, {connections.state().error}
-      </Show>
-      <Show when={connections.state().refreshing}>refreshing...</Show>
-      <Show when={connections.state().ready || connections.state().refreshing}>
-        <For each={connections.store}>
-          {(connection) => (
-            <p>
-              {connection.initiatorName} to {connection.receiverName}
-            </p>
-          )}
-        </For>
-      </Show>
-
+      <AsyncContent
+        loadingStore={connections}
+        errorMessage="Failed to load connections"
+      >
+        {(data) => (
+          <For each={data}>
+            {(con) => (
+              <p>
+                {con.initiatorName} to {con.receiverName}
+              </p>
+            )}
+          </For>
+        )}
+      </AsyncContent>
       <div class="created">
         Created with love by Miodec.
         <br />