From 26389a63dd160dd7a339b090ae765a456dd2d8b6 Mon Sep 17 00:00:00 2001
From: ynwd <10122431+ynwd@users.noreply.github.com>
Date: Mon, 28 Oct 2024 13:09:28 +0700
Subject: [PATCH] chore: implement loading

---
 modules/index/index.main.tsx | 93 ++++++++++++++++++++----------------
 1 file changed, 53 insertions(+), 40 deletions(-)

diff --git a/modules/index/index.main.tsx b/modules/index/index.main.tsx
index 796ad2ab..c9ff43cc 100644
--- a/modules/index/index.main.tsx
+++ b/modules/index/index.main.tsx
@@ -18,7 +18,7 @@ export function Main(
         name: "global",
         id: "01JAC4GM721KGRWZHG53SMXZP0",
     });
-    const { data: d } = useFetch<DataType[]>(
+    const { data: d, loading, error } = useFetch<DataType[]>(
         `api/message/${room.id}/${props.username}`,
     );
     const [data, setData] = useState<DataType[]>(d as any);
@@ -93,45 +93,58 @@ export function Main(
 
     return (
         <>
-            <div class="bg-center bg-no-repeat relative grow h-screen max-w-8/12 flex flex-col justify-end bg-gray-950 border-t border-l border-r border-gray-700">
-                <div style="content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/bg.png'); background-position: center; opacity: 0.1; z-index: 0;">
-                </div>
-                <div ref={listRef} class={`overflow-auto pt-3 mb-20 z-10`}>
-                    <ul class={`flex flex-col justify-end gap-y-2`}>
-                        {data && data.map((item, index) => {
-                            return (
-                                <ul
-                                    class={`px-4 text-sm flex flex-col justify-end gap-y-2`}
-                                    key={index}
-                                >
-                                    {item.messages.map((d, x) => {
-                                        const idx = x;
-                                        return (
-                                            <Message
-                                                id={d.id}
-                                                idx={idx}
-                                                msg={d.msg}
-                                                time={formatTime(d.time)}
-                                                username={item.username}
-                                                img={item.img}
-                                            />
-                                        );
-                                    })}
-                                </ul>
-                            );
-                        })}
-                    </ul>
-                </div>
-                <div class="absolute bottom-0 left-0 right-0 p-3">
-                    <MessageInput
-                        avatar_url={props.avatar_url}
-                        ws_url={props.ws_url}
-                        username={props.username}
-                        room={room}
-                        sendMessage={sendMessage}
-                    />
-                </div>
-            </div>
+            {loading
+                ? (
+                    <div class="grow h-screen max-w-8/12 flex justify-center bg-gray-950 border-t border-l border-r border-gray-700 p-4">
+                        Loading
+                    </div>
+                )
+                : (
+                    <div class="bg-center bg-no-repeat relative grow h-screen max-w-8/12 flex flex-col justify-end bg-gray-950 border-t border-l border-r border-gray-700">
+                        <div style="content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/bg.png'); background-position: center; opacity: 0.1; z-index: 0;">
+                        </div>
+                        <div
+                            ref={listRef}
+                            class={`overflow-auto pt-3 mb-20 z-10`}
+                        >
+                            <ul class={`flex flex-col justify-end gap-y-2`}>
+                                {data && data.map((item, index) => {
+                                    return (
+                                        <ul
+                                            class={`px-4 text-sm flex flex-col justify-end gap-y-2`}
+                                            key={index}
+                                        >
+                                            {item.messages.map((d, x) => {
+                                                const idx = x;
+                                                return (
+                                                    <Message
+                                                        id={d.id}
+                                                        idx={idx}
+                                                        msg={d.msg}
+                                                        time={formatTime(
+                                                            d.time,
+                                                        )}
+                                                        username={item.username}
+                                                        img={item.img}
+                                                    />
+                                                );
+                                            })}
+                                        </ul>
+                                    );
+                                })}
+                            </ul>
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 p-3">
+                            <MessageInput
+                                avatar_url={props.avatar_url}
+                                ws_url={props.ws_url}
+                                username={props.username}
+                                room={room}
+                                sendMessage={sendMessage}
+                            />
+                        </div>
+                    </div>
+                )}
         </>
     );
 }