adding loading animation

Author: ezequielramos

src/App.tsx

@@ -41,6 +41,7 @@ function App() {
   const [rootDir, setRootDir] = useState(dummyDir);
   const [pdfDataUrl, setPdfDataUrl] = useState<string>();
   const [selectedTab, setSelectedTab] = useState<string>();
+  const [isCompiling, setCompiling] = useState(false);
 
   async function readDirectory({ dirHandle, depth = 0, initialPath = '/', name, parentId }: {
     dirHandle: FileSystemDirectoryHandle,
@@ -111,25 +112,32 @@ function App() {
   }
 
   async function compileLatex() {
-    if (!selectedFile?.content) {
-      return;
-    }
-    var pdfTex = new PDFTeX();
-    pdfTex.initializeFSMethods();
-    await pdfTex.set_TOTAL_MEMORY(80 * 1024 * 1024);
-    const binary_pdf = await pdfTex.compileRaw(selectedFile.content);
+    try {
+      setCompiling(true);
+      if (!selectedFile?.content) {
+        return;
+      }
+      var pdfTex = new PDFTeX();
+      pdfTex.initializeFSMethods();
+      await pdfTex.set_TOTAL_MEMORY(80 * 1024 * 1024);
+      const binary_pdf = await pdfTex.compileRaw(selectedFile.content);
 
-    if (!binary_pdf) {
-      return;
-    }
+      if (!binary_pdf) {
+        return;
+      }
 
-    const uint8pdf = binaryStringToUint8Array(binary_pdf);
-    const blob = new Blob([uint8pdf], { type: "application/pdf" });
-    const url = URL.createObjectURL(blob);
+      const uint8pdf = binaryStringToUint8Array(binary_pdf);
+      const blob = new Blob([uint8pdf], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
 
-    setPdfDataUrl(url);
-    setSelectedTab('pdf');
+      setPdfDataUrl(url);
+      setSelectedTab('pdf');
 
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setCompiling(false);
+    }
   }
 
   async function newTexFile() {
@@ -157,18 +165,22 @@ function App() {
 
 
   return (<div>
-    <HeaderBar items={[{
-      label: 'New TeX File',
-      onClick: newTexFile,
-    }, {
-      label: 'Open Folder...',
-      onClick: selectFolder,
-      disabled: !window.showDirectoryPicker,
-    }, {
-      label: 'Compile LaTeX',
-      onClick: compileLatex,
-      disabled: !selectedFile || !selectedFile.name.endsWith('.tex')
-    }]} />
+    <HeaderBar
+      items={[{
+        label: 'New TeX File',
+        onClick: newTexFile,
+      }, {
+        label: 'Open Folder...',
+        onClick: selectFolder,
+        disabled: !window.showDirectoryPicker,
+      }, {
+        label: 'Compile LaTeX',
+        onClick: compileLatex,
+        disabled: !selectedFile || !selectedFile.name.endsWith('.tex'),
+        compileButton: true,
+      }]}
+      isCompiling={isCompiling}
+    />
     <div style={{
       display: 'flex',
     }}>

src/components/header-bar.tsx

@@ -1,17 +1,23 @@
 import { useState, type CSSProperties } from "react";
+import { getIcon } from "./icon";
 
 interface Item {
     label: string,
     onClick: () => void;
     disabled?: boolean;
+    compileButton?: boolean;
 }
 
-function Button(params: { item: Item; }) {
+function Button(params: { item: Item; isCompiling: boolean; }) {
     const buttonStyle: CSSProperties = {
         backgroundColor: 'transparent',
         color: params.item.disabled ? '#aaaaaa' : '#ffffff',
         borderWidth: 0,
         cursor: !params.item.disabled ? 'pointer' : undefined,
+        flexDirection: 'row',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4
     };
 
     const [isHovered, setHovered] = useState(false);
@@ -25,12 +31,34 @@ function Button(params: { item: Item; }) {
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
     >
+        {(() => {
+            if (!params.item.compileButton) {
+                return <></>;
+            }
+            return <>
+                <style>{`
+                    @keyframes spin {
+                    from { transform: rotate(0deg); }
+                    to { transform: rotate(360deg); }
+                    }
+                `}</style>
+
+                <span style={{
+                    display: "flex",
+                    animation: params.isCompiling ? "spin 1s linear infinite" : undefined,
+                }}>
+                    {getIcon('', params.isCompiling ? 'loading' : 'play')}
+                </span>
+            </>;
+
+        })()}
         {params.item.label}
     </button>;
 }
 
 export default function HeaderBar(params: {
     items: Item[];
+    isCompiling: boolean;
 }) {
 
     return <div style={{
@@ -43,7 +71,7 @@ export default function HeaderBar(params: {
         backgroundColor: '#333333',
     }}>
         {params.items.map((item) => {
-            return <Button key={item.label} item={item} />;
+            return <Button key={item.label} item={item} isCompiling={params.isCompiling} />;
         })}
     </div>;
 }

src/components/icon.tsx

@@ -9,6 +9,7 @@ import {
 } from "react-icons/si";
 import { FcFolder, FcOpenedFolder, FcPicture, FcFile } from "react-icons/fc";
 import { AiFillFileText } from "react-icons/ai";
+import { FaPlay, FaSpinner } from "react-icons/fa";
 
 function getIconHelper() {
     const cache = new Map<string, ReactNode>();
@@ -26,6 +27,8 @@ function getIconHelper() {
     cache.set("txt", <AiFillFileText color="white" />);
     cache.set("closedDirectory", <FcFolder />);
     cache.set("openDirectory", <FcOpenedFolder />);
+    cache.set("loading", <FaSpinner />);
+    cache.set("play", <FaPlay size={10} />);
     return function (extension: string, name: string): ReactNode {
         if (cache.has(extension)) return cache.get(extension);
         else if (cache.has(name)) return cache.get(name);