Simulierung eines Backend Calls mittels SetTimeout

src/App.tsx

@@ -55,8 +55,8 @@ function App() {
       </select>
       <Dynamic component={options[selected()]} />
       <FooComponent text="props test"/>
-      <div class="m-12 items-center justify-center^ flex h-screen shadow-lg bg-twitter-blue text-center">
-        red background
+      <div class="m-12 items-center justify-center^ flex  shadow-lg bg-twitter-blue text-center">
+        blue background
       </div>
       <NewFooComponent/>
     </>

src/NewFoo.tsx

@@ -1,6 +1,34 @@
+import {createSignal, createResource, Switch, Match, Show} from "solid-js"
+
+const fetchUser = async () => {
+    const response = await fetch('');
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(["abc", "def", "ghi"]);
+        }, 3000); // 2 Sekunden Delay
+    });
+}
+
 function NewFooComponent(){
+    const [userId, setUserId] = createSignal();
+    const [user] = createResource(userId, fetchUser);  
+
+    setTimeout(()=>{
+        setUserId(5);
+    },2000);
     return (
         <>
+            <Show when={user.loading}>
+                Loading...
+            </Show>
+            <Switch>
+                <Match when={user.error}>
+                    <span>Error: {user.error}</span>
+                </Match>
+                <Match when={user()}>
+                    <div>{JSON.stringify(user())}</div>
+                </Match>
+            </Switch>
             <div class="md (768px) justify-center bg-amber-100 py-7 justify-center text-center">
                 New Foo
             </div>