Patch flash when loading (#186)

* Wrapped exportAsync in a proxy method that allows us to also message the UI when you call it so that it can display a loading message.

* Added comment for clarity

Author: mimshwright

packages/backend/src/altNodes/altNodeUtils.ts

@@ -1,5 +1,6 @@
 import { AltNode } from "types";
 import { curry } from "../common/curry";
+import { exportAsyncProxy } from "../common/exportAsyncProxy";
 
 export const overrideReadonlyProperty = curry(
   <T, K extends keyof T>(prop: K, value: any, obj: T): T =>
@@ -48,7 +49,9 @@ export const isSVGNode = (node: SceneNode) => {
 };
 
 export const renderNodeAsSVG = async (node: SceneNode) =>
-  await node.exportAsync({ format: "SVG_STRING" });
+  await exportAsyncProxy<string>(node, {
+    format: "SVG_STRING",
+  });
 
 export const renderAndAttachSVG = async (node: SceneNode) => {
   const altNode = node as AltNode<typeof node>;
@@ -60,7 +63,7 @@ export const renderAndAttachSVG = async (node: SceneNode) => {
       return altNode;
     }
     // console.log(`${nodeName} can be flattened!`);
-    const svg = await renderNodeAsSVG(altNode.originalNode);
+    const svg = (await renderNodeAsSVG(altNode.originalNode)) as string;
     // console.log(`${svg}`);
     altNode.svg = svg;
   }

packages/backend/src/code.ts

@@ -29,10 +29,6 @@ export const run = async (settings: PluginSettings) => {
     );
   }
 
-  postConversionStart();
-  // force postMessage to run right now.
-  await new Promise((resolve) => setTimeout(resolve, 30));
-
   const convertedSelection = convertNodesToAltNodes(selection, null);
 
   // ignore when nothing was selected

packages/backend/src/common/exportAsyncProxy.ts

@@ -0,0 +1,43 @@
+import { postConversionStart } from "../messaging";
+
+let isRunning = false;
+
+/*
+ * This is a wrapper for exportAsync() This allows us to pass a message to the UI every time
+ * this rather costly operation gets run so that it can display a loading message. This avoids
+ * showing a loading message every time anything in the UI changes and only showing it when
+ * exportAsync() is called.
+ */
+export const exportAsyncProxy = async <
+  T extends string | Uint8Array = Uint8Array /* | Object */,
+>(
+  node: SceneNode,
+  settings: ExportSettings | ExportSettingsSVGString /*| ExportSettingsREST*/,
+): Promise<T> => {
+  if (node.exportAsync === undefined) {
+    // console.log(node);
+    throw new TypeError(
+      "Something went wrong. This node doesn't have an exportAsync() function. Maybe check the type before calling this function.",
+    );
+  }
+
+  if (isRunning === false) {
+    isRunning = true;
+    postConversionStart();
+    // force postMessage to run right now.
+    await new Promise((resolve) => setTimeout(resolve, 30));
+  }
+
+  // The following is necessary for typescript to not lose its mind.
+  let result;
+  if (settings.format === "SVG_STRING") {
+    result = await node.exportAsync(settings as ExportSettingsSVGString);
+    // } else if (settings.format === "JSON_REST_V1") {
+    //   result = await node.exportAsync(settings as ExportSettingsREST);
+  } else {
+    result = await node.exportAsync(settings as ExportSettings);
+  }
+
+  isRunning = false;
+  return result as T;
+};

packages/backend/src/common/images.ts

@@ -1,6 +1,7 @@
 import { AltNode, ExportableNode } from "types";
 import { btoa } from "js-base64";
 import { addWarning } from "./commonConversionWarnings";
+import { exportAsyncProxy } from "./exportAsyncProxy";
 
 export const PLACEHOLDER_IMAGE_DOMAIN = "https://placehold.co";
 
@@ -49,13 +50,6 @@ export const exportNodeAsBase64PNG = async <T extends ExportableNode>(
 
   const n: ExportableNode = node.originalNode;
 
-  if (n.exportAsync === undefined) {
-    console.log(n);
-    throw new TypeError(
-      "Something went wrong. This node doesn't have an exportAsync function. Maybe check the type before calling this function.",
-    );
-  }
-
   const temporarilyHideChildren =
     excludeChildren && "children" in n && n.children.length > 0;
   const parent = n as ChildrenMixin;
@@ -77,7 +71,7 @@ export const exportNodeAsBase64PNG = async <T extends ExportableNode>(
     format: "PNG",
     constraint: { type: "SCALE", value: 1 },
   };
-  const bytes = await n.exportAsync(exportSettings);
+  const bytes = await exportAsyncProxy(n, exportSettings);
 
   if (temporarilyHideChildren) {
     // After export, restore visibility