From dfc797fe58cc7b8a125c64fff83a5c169d2aba81 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 13 Sep 2022 21:09:58 +0800
Subject: [PATCH] chore: add loading spin

---
 web/src/pages/Home.tsx            | 29 +++++++++++---------
 web/src/pages/WorkspaceDetail.tsx | 45 +++++++++++++++++--------------
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 1168123..5d91142 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -20,20 +20,25 @@ const Home: React.FC = () => {
   return (
     <div className="w-full h-full flex flex-col justify-start items-start">
       <Header />
-      {loadingState.isLoading ? null : (
-        <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
-          <div className="mb-4 w-full flex flex-row justify-between items-center">
-            <span className="font-mono text-gray-400">Workspace List</span>
-            <div
-              className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
-              onClick={() => showCreateWorkspaceDialog()}
-            >
-              <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
-            </div>
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
+        <div className="mb-4 w-full flex flex-row justify-between items-center">
+          <span className="font-mono text-gray-400">Workspace List</span>
+          <div
+            className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
+            onClick={() => showCreateWorkspaceDialog()}
+          >
+            <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
           </div>
-          <WorkspaceListView workspaceList={workspaceList} />
         </div>
-      )}
+        {loadingState.isLoading ? (
+          <div className="py-4 w-full flex flex-row justify-center items-center">
+            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+            loading
+          </div>
+        ) : (
+          <WorkspaceListView workspaceList={workspaceList} />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx
index 9c3b949..3b065a2 100644
--- a/web/src/pages/WorkspaceDetail.tsx
+++ b/web/src/pages/WorkspaceDetail.tsx
@@ -46,27 +46,32 @@ const WorkspaceDetail: React.FC = () => {
   return (
     <div className="w-full h-full flex flex-col justify-start items-start">
       <Header />
-      {loadingState.isLoading ? null : (
-        <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
-          <div className="w-full flex flex-row justify-start items-center mb-4">
-            <span className="font-mono text-gray-600 cursor-pointer hover:underline" onClick={() => handleBackToHome()}>
-              Home
-            </span>
-            <span className="font-mono text-gray-200 mx-4">/</span>
-            <span className="font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
-          </div>
-          <div className="w-full flex flex-row justify-between items-center mb-4">
-            <span className="font-mono text-gray-400">Shortcut List</span>
-            <div
-              className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
-              onClick={() => showCreateShortcutDialog(state.workspace.id)}
-            >
-              <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
-            </div>
-          </div>
-          <ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
+        <div className="w-full flex flex-row justify-start items-center mb-4">
+          <span className="font-mono text-gray-600 cursor-pointer hover:underline" onClick={() => handleBackToHome()}>
+            Home
+          </span>
+          <span className="font-mono text-gray-200 mx-4">/</span>
+          <span className="font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
         </div>
-      )}
+        <div className="w-full flex flex-row justify-between items-center mb-4">
+          <span className="font-mono text-gray-400">Shortcut List</span>
+          <div
+            className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
+            onClick={() => showCreateShortcutDialog(state.workspace.id)}
+          >
+            <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
+          </div>
+        </div>
+        {loadingState.isLoading ? (
+          <div className="py-4 w-full flex flex-row justify-center items-center">
+            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+            loading
+          </div>
+        ) : (
+          <ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />
+        )}
+      </div>
     </div>
   );
 };