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

Added spinner over preview image

Browse Source
This commit is contained in:
CrispyBaguette 2022-05-05 16:54:44 +02:00
parent 10911b1a0c
commit a1f7d60e19
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";
interface ImagePreviewProps {
@ -14,12 +16,20 @@ function ImagePreview({ imageData }: ImagePreviewProps) {
}, [imageUrl]);
return (
<div className="blur-sm max-w-4xl mx-auto">
<div className="max-w-4xl mx-auto">
<div className="relative">
<img
alt="preview"
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>
);
}