aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-17 20:55:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: add loading spin

Browse Source
This commit is contained in:
Steven 2022-09-13 21:09:58 +08:00
parent 156218b40f
commit dfc797fe58
2 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/pages/Home.tsx
View File

@ -20,20 +20,25 @@ const Home: React.FC = () => {
return ( return (
<div className="w-full h-full flex flex-col justify-start items-start"> <div className="w-full h-full flex flex-col justify-start items-start">
<Header /> <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="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">
<div className="mb-4 w-full flex flex-row justify-between items-center"> <span className="font-mono text-gray-400">Workspace List</span>
<span className="font-mono text-gray-400">Workspace List</span> <div
<div className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow" onClick={() => showCreateWorkspaceDialog()}
onClick={() => showCreateWorkspaceDialog()} >
> <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
<Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
</div>
</div> </div>
<WorkspaceListView workspaceList={workspaceList} />
</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>
) : (
<WorkspaceListView workspaceList={workspaceList} />
)}
</div>
</div> </div>
); );
}; };

45
web/src/pages/WorkspaceDetail.tsx
View File

@ -46,27 +46,32 @@ const WorkspaceDetail: React.FC = () => {
return ( return (
<div className="w-full h-full flex flex-col justify-start items-start"> <div className="w-full h-full flex flex-col justify-start items-start">
<Header /> <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="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">
<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()}>
<span className="font-mono text-gray-600 cursor-pointer hover:underline" onClick={() => handleBackToHome()}> Home
Home </span>
</span> <span className="font-mono text-gray-200 mx-4">/</span>
<span className="font-mono text-gray-200 mx-4">/</span> <span className="font-mono text-gray-600">Workspace: {state?.workspace.name}</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> </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> </div>
); );
}; };