From 5e7169079c0b5728bfcf4efd7687d2a440d06539 Mon Sep 17 00:00:00 2001
From: Niklas <niklas@kapelle.org>
Date: Fri, 27 Aug 2021 21:50:14 +0200
Subject: [PATCH] added loading spinner

---
 src/assets/spinner.svg         |  4 ++++
 src/components/FileBrowser.tsx | 11 ++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/spinner.svg

diff --git a/src/assets/spinner.svg b/src/assets/spinner.svg
new file mode 100644
index 0000000..f5d043b
--- /dev/null
+++ b/src/assets/spinner.svg
@@ -0,0 +1,4 @@
+<svg class="animate-spin h-6 w-6 dark:text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>
\ No newline at end of file
diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx
index 100087f..ec16c5b 100644
--- a/src/components/FileBrowser.tsx
+++ b/src/components/FileBrowser.tsx
@@ -14,6 +14,7 @@ import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } f
 import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
 import FileUploadButton from "./FileUploadButton"
+import { ReactComponent as Spinner } from "./../assets/spinner.svg"
 
 function uriToPath(pathname:string) {
 	// strip the "/f" from e.g. "/f/dir1/dir2"
@@ -147,11 +148,7 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 					</div>
 
 				</div>
-
 				<div>
-					{loading && 
-						<div>Loading...</div> // TODO: center
-					}
 					<table className="w-full">
 						<thead className="border-b-2 dark:border-gray-900">
 							<tr>
@@ -161,7 +158,6 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 							</tr>
 						</thead>
 						<tbody className="divide-y dark:divide-gray-900">
-
 							{ data?.directorys.map(v => (<FileBrowserElement
 								key={v?.id}
 								dir={v}
@@ -186,6 +182,11 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 							/>))}
 						</tbody>
 					</table>
+					{loading && 
+						<div className="flex justify-center mt-4">
+							<Spinner />
+						</div>
+					}
 				</div>
 				{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
 					setShowFile(false)