feat: show loader state in icon add popup

src/components/modules/IconsHome/LeftIconsCollectionsNav/AddIconToCollection/modal.tsx

@@ -1,5 +1,5 @@
 import { FC, useState, useEffect, useRef } from 'react';
-import { Modal, Button, Checkbox } from 'components/ui/atomic-components';
+import { Modal, Button, Checkbox, Spinner } from 'components/ui/atomic-components';
 import { ReactComponent as UploadIcon } from 'assets/icons/upload.svg';
 import ImageUploading, { ImageListType } from 'react-images-uploading';
 import { ReactComponent as DocumentIcon } from 'assets/icons/document.svg';
@@ -15,6 +15,7 @@ interface Props {
 
 export const AddIconToCollectionModal: FC<Props> = ({ show, onClose }) => {
   const addButtonRef = useRef<HTMLButtonElement>(null);
+  const [showLoader, setShowLoader] = useState(false);
 
   const [optimizeIcon, setOptimizeIcon] = useState<boolean>(
     localStorage.getItem('optimizeIcon') === 'true'
@@ -38,6 +39,8 @@ export const AddIconToCollectionModal: FC<Props> = ({ show, onClose }) => {
 
   const onAdd = () => {
     if (uploadedIcons.length && selectedCollection) {
+      setShowLoader(true);
+
       // add icons to collection folder
       ipcRenderer.send('create-and-add-icon-to-folder', {
         uploadedIcons: uploadedIcons.map((icon) => ({
@@ -48,12 +51,16 @@ export const AddIconToCollectionModal: FC<Props> = ({ show, onClose }) => {
         optimizeIcon,
       });
 
-      onClose();
+      setTimeout(() => {
+        setShowLoader(false);
+        onClose();
+      }, 1500);
     }
   };
 
   const afterClose = () => {
     setUploadedIcons([]);
+    setShowLoader(false);
   };
 
   useEffect(() => {
@@ -74,6 +81,7 @@ export const AddIconToCollectionModal: FC<Props> = ({ show, onClose }) => {
       afterClose={afterClose}
       footer={
         <Button type="primary" onClick={onAdd} ref={addButtonRef}>
+          {showLoader && <Spinner className="mr-2" />}
           Add
         </Button>
       }

src/components/ui/atomic-components/Spinner/index.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+
+export const Spinner: FC<{ className: string }> = ({ className }) => {
+  return (
+    <svg className={`animate-spin h-4 w-4 mr-2 ${className}`} 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-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"
+      />
+    </svg>
+  );
+};

src/components/ui/atomic-components/index.ts

@@ -6,3 +6,4 @@ export * from './dropdown';
 export * from './dropdown/context-menu';
 export * from './checkbox';
 export * from './TextArea';
+export * from './Spinner';