niklas/s3browser-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added loading spinner

Browse Source
This commit is contained in:
Niklas 2021-08-27 21:50:14 +02:00
parent 13e38737fb
commit 5e7169079c
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/spinner.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

11
src/components/FileBrowser.tsx
View File

@ -14,6 +14,7 @@ import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } f
import FileBrowserElement from "./FileBrowserElement" import FileBrowserElement from "./FileBrowserElement"
import FileOpen from "./FileOpen" import FileOpen from "./FileOpen"
import FileUploadButton from "./FileUploadButton" import FileUploadButton from "./FileUploadButton"
import { ReactComponent as Spinner } from "./../assets/spinner.svg"
function uriToPath(pathname:string) { function uriToPath(pathname:string) {
// strip the "/f" from e.g. "/f/dir1/dir2" // strip the "/f" from e.g. "/f/dir1/dir2"
@ -147,11 +148,7 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
</div> </div>
</div> </div>
<div> <div>
{loading &&
<div>Loading...</div> // TODO: center
}
<table className="w-full"> <table className="w-full">
<thead className="border-b-2 dark:border-gray-900"> <thead className="border-b-2 dark:border-gray-900">
<tr> <tr>
@ -161,7 +158,6 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y dark:divide-gray-900"> <tbody className="divide-y dark:divide-gray-900">
{ data?.directorys.map(v => (<FileBrowserElement { data?.directorys.map(v => (<FileBrowserElement
key={v?.id} key={v?.id}
dir={v} dir={v}
@ -186,6 +182,11 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
/>))} />))}
</tbody> </tbody>
</table> </table>
{loading &&
<div className="flex justify-center mt-4">
<Spinner />
</div>
}
</div> </div>
{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{ {<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
setShowFile(false) setShowFile(false)