Error and loading states in download as zip.

components/EditorNavigation.tsx

@@ -330,7 +330,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               },
             }}
           >
-            <Button onClick={downloadAsZip} outline size="sm" css={{ alignItems: "center" }}>
+            <Button disabled={state.zipLoading} onClick={downloadAsZip} outline size="sm" css={{ alignItems: "center" }}>
               <DownloadSimple size="16px" />
             </Button>
             <Button
@@ -368,7 +368,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                <DropdownMenuItem onClick={downloadAsZip}>
+                <DropdownMenuItem disabled={state.zipLoading} onClick={downloadAsZip}>
                   <DownloadSimple size="16px" /> Download as ZIP
                 </DropdownMenuItem>
                 <DropdownMenuItem

state/actions/downloadAsZip.ts

@@ -1,11 +1,19 @@
 import { createZip } from '../../utils/zip';
 import { guessZipFileName } from '../../utils/helpers';
 import state from '..'
+import toast from 'react-hot-toast';
 
 export const downloadAsZip = async () => {
-    // TODO do something about loading state
-    const files = state.files.map(({ name, content }) => ({ name, content }));
-    const zipped = await createZip(files);
-    const zipFileName = guessZipFileName(files);
-    zipped.saveFile(zipFileName);
+    try {
+        state.zipLoading = true
+        // TODO do something about file/gist loading state
+        const files = state.files.map(({ name, content }) => ({ name, content }));
+        const zipped = await createZip(files);
+        const zipFileName = guessZipFileName(files);
+        zipped.saveFile(zipFileName);
+    } catch (error) {
+        toast.error('Error occured while creating zip file, try again later')
+    } finally {
+        state.zipLoading = false
+    }
 };

state/index.ts

@@ -45,6 +45,7 @@ export interface IState {
   activeWat: number;
   loading: boolean;
   gistLoading: boolean;
+  zipLoading: boolean;
   compiling: boolean;
   logs: ILog[];
   deployLogs: ILog[];
@@ -59,7 +60,7 @@ export interface IState {
 }
 
 // let localStorageState: null | string = null;
-let initialState = {
+let initialState: IState = {
   files: [],
   active: 0,
   activeWat: 0,
@@ -72,6 +73,7 @@ let initialState = {
   gistOwner: undefined,
   gistName: undefined,
   gistLoading: false,
+  zipLoading: false,
   editorSettings: {
     tabSize: 2,
   },