add progress bar to write

Author: Joshua Levi

src/taskpane/components/App.tsx

@@ -163,6 +163,9 @@ const App = () => {
   const textAreaId = useId("textarea");
   const [isWriteLoading, setIsWriteLoading] = useState(false);
   const [writeErrorMessage, setWriteErrorMessage] = useState<string>();
+  const [writeProcessedRows, setWriteProcessedRows] = useState(0);
+  const [writeTotalRows, setWriteTotalRows] = useState(0);
+  const writeSheetPercent = writeTotalRows > 0 ? ((writeProcessedRows / writeTotalRows) * 100).toFixed(2) : 0;
 
   const incrementProcessedRows = () => {
     setProcessedRows((state) => state + 1);
@@ -460,6 +463,18 @@ const App = () => {
     return columnName;
   }
   const writeWorkbook = async (jsonData: any) => {
+    setWriteProcessedRows(0);
+    let totalRows = 0;
+    jsonData.worksheets.forEach(sheet => {
+      // Count max row index in each worksheet
+      let maxRow = 0;
+      Object.values(sheet.cells).forEach((cell: any) => {
+        maxRow = Math.max(maxRow, cell.rowIndex);
+      });
+      totalRows += maxRow + 1;
+    });
+    setWriteTotalRows(totalRows);
+    let writtenRows = 0;
     await Excel.run(async (context) => {
       try {
         const ROW_CHUNK_SIZE = 2; // Adjust based on performance needs
@@ -479,7 +494,6 @@ const App = () => {
 
           context.application.suspendScreenUpdatingUntilNextSync();
 
-
           let sheet_cells = worksheet.getRange(sheetData.cells[Object.keys(sheetData.cells)[0]].address + ":" + sheetData.cells[Object.keys(sheetData.cells)[Object.keys(sheetData.cells).length - 1]].address);
           const { properties, formulas, numberFormats } = parseExcelJsonTo2DArrays(sheetData.cells);
 
@@ -490,6 +504,12 @@ const App = () => {
           });
           sheet_cells.setCellProperties(properties);
 
+          // Simulate row-wise progress update
+          for (let row = 0; row < formulas.length; row++) {
+            writtenRows++;
+            setWriteProcessedRows(writtenRows);
+          }
+
           sheet_cells.untrack();
           await context.sync();
         }
@@ -656,6 +676,15 @@ const App = () => {
                 </Button>
               </div>
 
+              {isWriteLoading && (
+                <div className={styles.progressContainer}>
+                  <Text className={styles.progressText}>
+                    Writing Row {writeProcessedRows} of {writeTotalRows} ({writeSheetPercent}%)
+                  </Text>
+                  <ProgressBar value={Number(writeSheetPercent) / 100} />
+                </div>
+              )}
+
               {writeErrorMessage && (
                 <Text className={styles.errorMessage}>{writeErrorMessage}</Text>
               )}