From 7895daaea8d33071b813e8bbd81c837a683f3264 Mon Sep 17 00:00:00 2001
From: Jordi Sala Morales <jordism91@gmail.com>
Date: Tue, 4 Jun 2024 12:44:02 +0200
Subject: [PATCH] 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               |  5 +++
 .../transformers/transformDocumentNode.ts     | 11 ++++---
 ui-src/components/ExporterProgress.tsx        | 31 ++++++++++++++-----
 ui-src/components/PenpotExporter.tsx          |  7 +++--
 4 files changed, 39 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/two-cougars-allow.md

diff --git a/.changeset/two-cougars-allow.md b/.changeset/two-cougars-allow.md
new file mode 100644
index 0000000..9ca2523
--- /dev/null
+++ 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
index 251f1c7..b860088 100644
--- a/plugin-src/transformers/transformDocumentNode.ts
+++ b/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();
-
-    children.push(await transformPageNode(page));
+    await sleep(0);
   }
 
   return {
diff --git a/ui-src/components/ExporterProgress.tsx b/ui-src/components/ExporterProgress.tsx
index d857aae..549b99d 100644
--- 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 ? (
           <>
-            <br />
-            Currently exporting layer
-            <br />
-            {'“' + truncateText(currentNode, 40) + '”'}
+            {processedPages} of {totalPages} pages exported 💪
+            {currentNode ? (
+              <>
+                <br />
+                Currently exporting layer
+                <br />
+                {'“' + truncateText(currentNode, 35) + '”'}
+              </>
+            ) : undefined}
           </>
-        ) : undefined}
+        ) : (
+          <>
+            Generating Penpot file 🚀
+            <br />
+            Please wait, this process might take a while...
+          </>
+        )}
       </span>
     </Stack>
   );
diff --git a/ui-src/components/PenpotExporter.tsx b/ui-src/components/PenpotExporter.tsx
index 2ac40d6..4061d34 100644
--- 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 (