Improve UX for larger files, when the download also takes time to pro…

…cess (#136) * Improve UX for larger files, when the download also takes time to process * add changelog
penpot · Jun 4, 2024 · 7895daa · 7895daa
1 parent 8a86304
commit 7895daa
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/.changeset/two-cougars-allow.md b/.changeset/two-cougars-allow.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Add loader when generating really large files after the page processing loader
diff --git a/plugin-src/transformers/transformDocumentNode.ts b/plugin-src/transformers/transformDocumentNode.ts
@@ -1,28 +1,31 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
 import { imagesLibrary } from '@plugin/ImageLibrary';
+import { sleep } from '@plugin/utils';
 
 import { PenpotDocument } from '@ui/types';
 
 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',
     data: node.children.length
   });
 
   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();
-
-    children.push(await transformPageNode(page));
+    await sleep(0);
   }
 
   return {

diff --git a/ui-src/components/ExporterProgress.tsx b/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' }}>
-        {processedPages} of {totalPages} pages exported 💪
-        {currentNode ? (
+        {!downloading ? (
           <>
+            {processedPages} of {totalPages} pages exported 💪
+            {currentNode ? (
+              <>
+                <br />
+                Currently exporting layer
+                <br />
+                {'“' + truncateText(currentNode, 35) + '”'}
+              </>
+            ) : undefined}
+          </>
+        ) : (
+          <>
+            Generating Penpot file 🚀
             <br />
-            Currently exporting layer
-            <br />
-            {'“' + truncateText(currentNode, 40) + '”'}
+            Please wait, this process might take a while...
           </>
-        ) : undefined}
+        )}
       </span>
     </Stack>
   );

diff --git a/ui-src/components/PenpotExporter.tsx b/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 (