feat(frontend): add upload icon

frontend/src/components/video/ExportWidget.tsx

@@ -5,15 +5,32 @@ type props = {
     dataSend: React.MouseEventHandler<HTMLButtonElement>;
     handleDownload: React.MouseEventHandler<HTMLButtonElement>;
     downloadable: boolean;
-    progress: number
+    progress: number;
+    uploading: boolean;
 }
 
-const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props) => {
+const Spinner = () => (
+    <svg
+        className="animate-spin h-4 w-4"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+    </svg>
+);
+
+const ExportWidget = ({dataSend, handleDownload, downloadable, progress, uploading}: props) => {
     return (
         <div className={"flex flex-col gap-3"}>
             <BlueButton
-                onClick={dataSend}>
-                Export
+                onClick={dataSend}
+                disabled={uploading}
+                className={uploading ? "opacity-60 cursor-not-allowed flex items-center justify-center gap-2" : ""}
+            >
+                {uploading && <Spinner />}
+                {uploading ? "Uploading..." : "Export"}
             </BlueButton>
 
             <div className="h-10 flex items-center">
@@ -33,4 +50,4 @@ const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props)
     )
 }
 
-export default ExportWidget;
+export default ExportWidget;