From 36518874531bab6e77c2f15a54e6c931d39dff13 Mon Sep 17 00:00:00 2001
From: marco <marcokittel@web.de>
Date: Wed, 11 Jun 2025 12:10:27 +0200
Subject: [PATCH] Simulierung eines Backend Calls mittels SetTimeout

---
 src/App.tsx    |  4 ++--
 src/NewFoo.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7e61f5e..e81257d 100644
--- a/src/App.tsx
+++ b/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/>
     </>
diff --git a/src/NewFoo.tsx b/src/NewFoo.tsx
index 3c4ca16..0e65ca8 100644
--- a/src/NewFoo.tsx
+++ b/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>