Improve UX for larger files, when the download also takes time to process (#136)

* Improve UX for larger files, when the download also takes time to process

* add changelog

.changeset/two-cougars-allow.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Add loader when generating really large files after the page processing loader

plugin-src/transformers/transformDocumentNode.ts

@@ -1,5 +1,6 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
 import { imagesLibrary } from '@plugin/ImageLibrary';
+import { sleep } from '@plugin/utils';
 
 import { PenpotDocument } from '@ui/types';
 
@@ -7,7 +8,7 @@ import { transformPageNode } from '.';
 
 export const transformDocumentNode = async (node: DocumentNode): Promise<PenpotDocument> => {
   const children = [];
-  let currentPage = 0;
+  let currentPage = 1;
 
   figma.ui.postMessage({
     type: 'PROGRESS_TOTAL_PAGES',
@@ -15,14 +16,16 @@ export const transformDocumentNode = async (node: DocumentNode): Promise<PenpotD
   });
 
   for (const page of node.children) {
+    await page.loadAsync();
+
+    children.push(await transformPageNode(page));
+
     figma.ui.postMessage({
       type: 'PROGRESS_PROCESSED_PAGES',
       data: currentPage++
     });
 
-    await page.loadAsync();
+    await sleep(0);
-
-    children.push(await transformPageNode(page));
   }
 
   return {

ui-src/components/ExporterProgress.tsx

@@ -3,7 +3,11 @@ import { useEffect, useState } from 'react';
 
 import { Stack } from './Stack';
 
-export const ExporterProgress = () => {
+type ExporterProgressProps = {
+  downloading: boolean;
+};
+
+export const ExporterProgress = ({ downloading }: ExporterProgressProps) => {
   const [currentNode, setCurrentNode] = useState<string | undefined>();
   const [totalPages, setTotalPages] = useState<number | undefined>();
   const [processedPages, setProcessedPages] = useState<number | undefined>();
@@ -13,6 +17,7 @@ export const ExporterProgress = () => {
       setCurrentNode(event.data.pluginMessage.data as string);
     } else if (event.data.pluginMessage?.type === 'PROGRESS_TOTAL_PAGES') {
       setTotalPages(event.data.pluginMessage.data as number);
+      setProcessedPages(0);
     } else if (event.data.pluginMessage?.type === 'PROGRESS_PROCESSED_PAGES') {
       setProcessedPages(event.data.pluginMessage.data as number);
     }
@@ -38,15 +43,25 @@ export const ExporterProgress = () => {
     <Stack space="small" horizontalAlign="center">
       <LoadingIndicator />
       <span style={{ textAlign: 'center' }}>
+        {!downloading ? (
+          <>
             {processedPages} of {totalPages} pages exported 💪
             {currentNode ? (
               <>
                 <br />
                 Currently exporting layer
                 <br />
-            {'“' + truncateText(currentNode, 40) + '”'}
+                {'“' + truncateText(currentNode, 35) + '”'}
               </>
             ) : undefined}
+          </>
+        ) : (
+          <>
+            Generating Penpot file 🚀
+            <br />
+            Please wait, this process might take a while...
+          </>
+        )}
       </span>
     </Stack>
   );

ui-src/components/PenpotExporter.tsx

@@ -16,18 +16,19 @@ export const PenpotExporter = () => {
   const [needsReload, setNeedsReload] = useState(false);
   const [loading, setLoading] = useState(true);
   const [exporting, setExporting] = useState(false);
+  const [downloading, setDownloading] = useState(false);
   const methods = useForm<FormValues>();
 
   methods.getValues();
 
   const onMessage = (event: MessageEvent<{ pluginMessage: { type: string; data: unknown } }>) => {
     if (event.data.pluginMessage?.type == 'PENPOT_DOCUMENT') {
+      setDownloading(true);
+
       const document = event.data.pluginMessage.data as PenpotDocument;
       const file = parse(document);
 
       file.export();
-
-      setExporting(false);
     } else if (event.data.pluginMessage?.type == 'CUSTOM_FONTS') {
       setMissingFonts(event.data.pluginMessage.data as string[]);
       setLoading(false);
@@ -72,7 +73,7 @@ export const PenpotExporter = () => {
 
   if (loading) return <LoadingIndicator />;
 
-  if (exporting) return <ExporterProgress />;
+  if (exporting) return <ExporterProgress downloading={downloading} />;
 
   if (needsReload) {
     return (