alexandre/PaletteSwitcher
1
0
Fork 0
Code Issues 4 Pull Requests 9 Actions Packages Projects Releases Activity

Merge pull request #24 from CrispyBaguette/spinner

Browse Source 
Added spinner over preview image
This commit is contained in:
CrispyBaguette 2022-05-05 17:02:15 +02:00 committed by GitHub
commit f27457ba70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/ImagePreview.tsx
View File

@ -1,3 +1,5 @@
import { faSpinner } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect } from "react"; import { useEffect } from "react";
interface ImagePreviewProps { interface ImagePreviewProps {
@ -14,12 +16,20 @@ function ImagePreview({ imageData }: ImagePreviewProps) {
}, [imageUrl]); }, [imageUrl]);
return ( return (
<div className="blur-sm max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="relative">
<img <img
alt="preview" alt="preview"
src={imageUrl} src={imageUrl}
className="object-cover min-w-[70%] my-4 px-2 mx-auto" className="blur-sm object-cover min-w-[70%] my-4 px-2 mx-auto"
/> />
<div className="absolute inset-1/2 -translate-y-12 -translate-x-12 w-24 h-24">
<FontAwesomeIcon
icon={faSpinner}
className="absolute animate-spin text-8xl"
/>
</div>
</div>
</div> </div>
); );
} }