Async loading (#174)

* added loading message when processing large images and paths. still has issues with async because messages aren't sent synchronously

* Moved the loading message out of the implementation folder and into the library.
Improved the visuals and language of the loading message.

* Fixed two minor linter errors in readme

Author: mimshwright

apps/debug/README.md

@@ -1,4 +1,4 @@
-## Getting Started
+# Getting Started
 
 First, run the development server:
 

apps/plugin/README.md

@@ -1,4 +1,4 @@
-## Getting Started
+# Getting Started
 
 First, run the development server:
 

apps/plugin/ui-src/App.tsx

@@ -30,7 +30,7 @@ export default function App() {
   const [state, setState] = useState<AppState>({
     code: "",
     selectedFramework: "HTML",
-    isLoading: false,
+    isLoading: true,
     htmlPreview: emptyPreview,
     settings: null,
     colors: [],
@@ -49,12 +49,21 @@ export default function App() {
       console.log("[ui] message received:", untypedMessage);
 
       switch (untypedMessage.type) {
+        case "conversionStart":
+          setState((prevState) => ({
+            ...prevState,
+            code: "",
+            isLoading: true,
+          }));
+          break;
+
         case "code":
           const conversionMessage = untypedMessage as ConversionMessage;
           setState((prevState) => ({
             ...prevState,
             ...conversionMessage,
             selectedFramework: conversionMessage.settings.framework,
+            isLoading: false,
           }));
           break;
 
@@ -76,6 +85,7 @@ export default function App() {
             warnings: [],
             colors: [],
             gradients: [],
+            isLoading: false,
           }));
           break;
 
@@ -87,6 +97,7 @@ export default function App() {
             colors: [],
             gradients: [],
             code: `Error :(\n// ${errorMessage.error}`,
+            isLoading: false,
           }));
           break;
         default:
@@ -99,26 +110,6 @@ export default function App() {
     };
   }, []);
 
-  useEffect(() => {
-    if (state.selectedFramework === null) {
-      const timer = setTimeout(
-        () => setState((prevState) => ({ ...prevState, isLoading: true })),
-        300,
-      );
-      return () => clearTimeout(timer);
-    } else {
-      setState((prevState) => ({ ...prevState, isLoading: false }));
-    }
-  }, [state.selectedFramework]);
-
-  if (state.selectedFramework === null) {
-    return state.isLoading ? (
-      <div className="w-full h-96 justify-center text-center items-center dark:text-white text-lg">
-        Loading Plugin...
-      </div>
-    ) : null;
-  }
-
   const handleFrameworkChange = (updatedFramework: Framework) => {
     setState((prevState) => ({
       ...prevState,
@@ -129,11 +120,13 @@ export default function App() {
       targetOrigin: "*",
     });
   };
-  console.log("state.code", state.code.slice(0, 25));
+
+  const darkMode = figmaColorBgValue !== "#ffffff";
 
   return (
-    <div className={`${figmaColorBgValue === "#ffffff" ? "" : "dark"}`}>
+    <div className={`${darkMode ? "dark" : ""}`}>
       <PluginUI
+        isLoading={state.isLoading}
         code={state.code}
         warnings={state.warnings}
         selectedFramework={state.selectedFramework}

packages/backend/src/code.ts

@@ -3,13 +3,17 @@ import {
   retrieveGenericSolidUIColors,
   retrieveGenericLinearGradients as retrieveGenericGradients,
 } from "./common/retrieveUI/retrieveColors";
-import { generateHTMLPreview, htmlMain } from "./html/htmlMain";
-import { postConversionComplete, postEmptyMessage } from "./messaging";
 import {
   addWarning,
   clearWarnings,
   warnings,
 } from "./common/commonConversionWarnings";
+import { generateHTMLPreview } from "./html/htmlMain";
+import {
+  postConversionComplete,
+  postConversionStart,
+  postEmptyMessage,
+} from "./messaging";
 import { PluginSettings } from "types";
 import { convertToCode } from "./common/retrieveUI/convertToCode";
 
@@ -24,6 +28,10 @@ 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/messaging.ts

@@ -1,5 +1,6 @@
 import {
   ConversionMessage,
+  ConversionStartMessage,
   EmptyMessage,
   ErrorMessage,
   PluginSettings,
@@ -11,6 +12,9 @@ export const postBackendMessage = figma.ui.postMessage;
 export const postEmptyMessage = () =>
   postBackendMessage({ type: "empty" } as EmptyMessage);
 
+export const postConversionStart = () =>
+  postBackendMessage({ type: "conversionStart" } as ConversionStartMessage);
+
 export const postConversionComplete = (
   conversionData: ConversionMessage | Omit<ConversionMessage, "type">,
 ) => postBackendMessage({ ...conversionData, type: "code" });

packages/plugin-ui/src/PluginUI.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import copy from "copy-to-clipboard";
 import Preview from "./components/Preview";
 import GradientsPanel from "./components/GradientsPanel";
@@ -17,6 +16,7 @@ import {
   preferenceOptions,
   selectPreferenceOptions,
 } from "./codegenPreferenceOptions";
+import Loading from "./components/Loading";
 
 type PluginUIProps = {
   code: string;
@@ -28,11 +28,14 @@ type PluginUIProps = {
   onPreferenceChanged: (key: string, value: boolean | string) => void;
   colors: SolidColorConversion[];
   gradients: LinearGradientConversion[];
+  isLoading: boolean;
 };
 
 const frameworks: Framework[] = ["HTML", "Tailwind", "Flutter", "SwiftUI"];
 
 export const PluginUI = (props: PluginUIProps) => {
+  if (props.isLoading) return <Loading />;
+
   const isEmpty = props.code === "";
 
   const warnings = props.warnings ?? [];

packages/plugin-ui/src/components/Loading.tsx

@@ -0,0 +1,24 @@
+interface LoadingProps {}
+const Loading = (_props: LoadingProps) => (
+  <div
+    style={{ animation: "fadeIn 600ms" }}
+    className={`flex w-full h-full p-4 dark:text-white text-lg`}
+  >
+    <div className="dark:text-white">
+      <p className="text-lg font-medium dark:text-white rounded-lg">
+        Converting...
+      </p>
+      <p className="text-xs italic max-w-56">
+        This can take a while if the selection has many images or paths
+      </p>
+    </div>
+    <style>{`
+      @keyframes fadeIn {
+        0% { opacity: 0; }
+        25% {opacity: 0; }
+        100% { opacity: 1; }
+      }
+    `}</style>
+  </div>
+);
+export default Loading;

packages/types/src/types.ts

@@ -47,6 +47,7 @@ export interface UIMessage {
   pluginMessage: Message;
 }
 export type EmptyMessage = Message & { type: "empty" };
+export type ConversionStartMessage = Message & { type: "conversionStarted" };
 export type ConversionMessage = Message & {
   type: "code";
 } & ConversionData;