Add playground loading bar

Author: pomber

packages/mdx/package.json

@@ -44,7 +44,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@code-hike/lighter": "^0.2.0",
+    "@code-hike/lighter": "^0.2.3",
     "node-fetch": "^2.0.0",
     "shiki": "^0.10.1"
   },

playground/src/index.css

@@ -214,3 +214,26 @@ main {
   display: block;
   padding: 4px;
 }
+
+.loading-border {
+  position: absolute;
+  top: 0;
+  border-top: 6px solid rgb(96 165 250);
+  transition: opacity 0.5s;
+  animation: loading-border 2.5s linear infinite;
+}
+
+@keyframes loading-border {
+  from {
+    right: 100%;
+    left: 0%;
+  }
+  50% {
+    right: 0%;
+    left: 0%;
+  }
+  to {
+    right: 0%;
+    left: 100%;
+  }
+}

playground/src/preview.jsx

@@ -29,11 +29,9 @@ function ErrorFallback({ error }) {
   );
 }
 
-function InnerPreview({ input, standalone, refreshKey }) {
-  const [Content, setContent] = useState(undefined);
-  const [error, setError] = useState(undefined);
-  useEffect(() => {
-    compile(input.mdx, {
+async function compileAndRun(input) {
+  try {
+    const c = await compile(input.mdx, {
       outputFormat: "function-body",
       remarkPlugins: [
         [
@@ -45,19 +43,49 @@ function InnerPreview({ input, standalone, refreshKey }) {
           },
         ],
       ],
-    })
-      .then((c) => {
-        return run(String(c), runtime);
-      })
-      .then((x) => {
-        setContent(() => x.default);
-        setError(undefined);
-      })
-      .catch((e) => {
-        setError(e.message);
-        console.error({ e });
-      });
+    });
+    const x = await run(String(c), runtime);
+    return { content: x.default, error: undefined };
+  } catch (e) {
+    return { content: undefined, error: e.message };
+  }
+}
+
+let effectId = 0;
+
+function useInput(input) {
+  const [{ Content, error }, setState] = useState({
+    Content: undefined,
+    error: undefined,
+  });
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    const id = effectId;
+    // console.log("compiling...", id);
+    setLoading(true);
+    compileAndRun(input).then(({ content, error }) => {
+      // console.log("compiled", id, error);
+      if (id !== effectId) {
+        // console.log("skipping", id);
+        return;
+      }
+      setState((state) => ({
+        Content: content || state.Content,
+        error,
+      }));
+      setLoading(false);
+    });
+    return () => {
+      // console.log("cancelling", id);
+      effectId++;
+    };
   }, [input.mdx, input.css, input.config]);
+
+  return { Content, error, loading };
+}
+
+function InnerPreview({ input, standalone, refreshKey }) {
+  const { Content, error, loading } = useInput(input);
   // console.log(error);
   return (
     <>
@@ -78,6 +106,7 @@ function InnerPreview({ input, standalone, refreshKey }) {
         </a>
       )}
       <div className={`preview-container ${error ? "with-error" : ""}`}>
+        <div style={{ opacity: loading ? 1 : 0 }} className="loading-border" />
         {Content ? <Content components={{ CH }} key={refreshKey} /> : null}
       </div>
     </>

yarn.lock

@@ -2844,10 +2844,10 @@
   resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.5.4.tgz#1a89069978734e132fa4a59414ddb64e4b94fde7"
   integrity sha512-qnikpQgi30AS01aFlNQV6l8/qdZIcP76mp90ti+u4rucXHsn4afSKivQXApqxvrQG9+Ibv45STyvHizvxef/7A==
 
-"@code-hike/lighter@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@code-hike/lighter/-/lighter-0.2.0.tgz#8ebcd23fbeba020850b5a5e7f61a116dd8175a60"
-  integrity sha512-THj5c7M6TS/d2t8MUiwkoA3H4qN4L1gr7O8SC0TyM4m6n3y7vsfVYp8LsHi+ksa66kkzyo8Mxo0OqBdL08d7FA==
+"@code-hike/lighter@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@code-hike/lighter/-/lighter-0.2.3.tgz#bab489b309c70ddc741a660f146312e47e014e62"
+  integrity sha512-9Kn/FHTXHEzB5GKsFPUjLqFgWWRGA6sKivOGZ1+3kKGWiKCsPtMwbLUwQeYwcOihPE+7SNLBlE0wpDkG62B2jQ==
 
 "@codesandbox/sandpack-client@^0.19.0":
   version "0.19.0"