From 690f28bed81b73382ddf780ab10ccf4d0b91ccfe Mon Sep 17 00:00:00 2001
From: Simon <41589344+sawatkins@users.noreply.github.com>
Date: Tue, 11 Mar 2025 18:56:22 -0700
Subject: [PATCH] feat: add loading spinner during file upload process (#4491)

* show LoaderIcon while uploading file

* fix spacing for eslint
---
 .../MemoEditor/ActionButton/UploadResourceButton.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx b/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
index b5506febe..af7d7ef32 100644
--- a/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
+++ b/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@usememos/mui";
-import { PaperclipIcon } from "lucide-react";
+import { LoaderIcon, PaperclipIcon } from "lucide-react";
 import { useContext, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { useResourceStore } from "@/store/v1";
@@ -67,7 +67,7 @@ const UploadResourceButton = () => {
 
   return (
     <Button className="relative" size="sm" variant="plain" disabled={state.uploadingFlag}>
-      <PaperclipIcon className="w-5 h-5 mx-auto" />
+      {state.uploadingFlag ? <LoaderIcon className="w-5 h-5 mx-auto animate-spin" /> : <PaperclipIcon className="w-5 h-5 mx-auto" />}
       <input
         className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
         ref={fileInputRef}