Patch/0.0.4 (#43)

* fix: extra character left in codemirror when updating code from the outside * loading screen timeout * version bump * fix: small style update * fix: timeout value
codesandbox · Apr 20, 2021 · 86b6bf0 · 86b6bf0
1 parent 6b73a54
commit 86b6bf0
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 13 deletions.
diff --git a/sandpack-client/package.json b/sandpack-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sandpack-client",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "keywords": [],
   "repository": {

diff --git a/sandpack-react/package.json b/sandpack-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codesandbox/sandpack-react",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "keywords": [],
   "repository": {
@@ -43,7 +43,7 @@
     "@codemirror/matchbrackets": "^0.18.0",
     "@codemirror/state": "^0.18.0",
     "@codemirror/view": "^0.18.0",
-    "@codesandbox/sandpack-client": "^0.0.3",
+    "@codesandbox/sandpack-client": "^0.0.4",
     "codesandbox-import-utils": "^1.2.3",
     "prism-react-renderer": "^1.1.1"
   },

diff --git a/sandpack-react/src/common/LoadingOverlay.tsx b/sandpack-react/src/common/LoadingOverlay.tsx
@@ -13,6 +13,33 @@ export const LoadingOverlay: React.FC = () => {
     return null;
   }
 
+  if (loadingOverlayState === "timeout") {
+    return (
+      <div className={c("overlay", "error")}>
+        <div className={c("error-message")}>
+          Unable to establish connection with the sandpack bundler. Make sure
+          you are online or try again later. If the problem persists, please
+          report it via{" "}
+          <a
+            className={c("error-message")}
+            href="mailto:[email protected]?subject=Sandpack Timeout Error"
+          >
+            email
+          </a>{" "}
+          or submit an issue on{" "}
+          <a
+            className={c("error-message")}
+            href="https://github.com/codesandbox/sandpack/issues"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            GitHub.
+          </a>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={c("overlay", "loading")}

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -180,7 +180,7 @@ export const CodeMirror: React.FC<CodeMirrorProps> = ({
     if (cmView.current && code !== internalCode) {
       const view = cmView.current;
       view.dispatch({
-        changes: { from: 0, to: view.state.doc.length - 1, insert: code },
+        changes: { from: 0, to: view.state.doc.length, insert: code },
       });
     }
   }, [code]);

diff --git a/sandpack-react/src/hooks/useLoadingOverlayState.ts b/sandpack-react/src/hooks/useLoadingOverlayState.ts
@@ -2,7 +2,11 @@ import * as React from "react";
 
 import { useSandpack } from "./useSandpack";
 
-export type LoadingOverlayState = "visible" | "fading" | "hidden";
+export type LoadingOverlayState = "visible" | "fading" | "hidden" | "timeout";
+
+const BUNDLER_TIMEOUT = 30000; // 30 seconds timeout for the bundler to respond.
+const FADE_DELAY = 1000; // 1 second delay one initial load, only relevant if the loading overlay is visible.
+const FADE_ANIMATION_DURATION = 500; // 500 ms fade animation
 
 export const useLoadingOverlayState = (): LoadingOverlayState => {
   const { sandpack, listen } = useSandpack();
@@ -13,30 +17,39 @@ export const useLoadingOverlayState = (): LoadingOverlayState => {
 
   React.useEffect(() => {
     sandpack.loadingScreenRegisteredRef.current = true;
-    let innerTimeoutHook: NodeJS.Timer;
-    let outerTimeoutHook: NodeJS.Timer;
+    let innerHook: NodeJS.Timer;
+    let outerHook: NodeJS.Timer;
+
+    // Timeout hook in case the bundler does not respond
+    const timeoutHook = setTimeout(() => {
+      setLoadingOverlayState("timeout");
+    }, BUNDLER_TIMEOUT);
 
     const unsub = listen((message) => {
+      // If the bundler dispatches any message, clear the timeout hook
+      clearTimeout(timeoutHook);
+
       if (message.type === "start" && message.firstLoad === true) {
         setLoadingOverlayState("visible");
       }
 
       if (message.type === "done") {
-        outerTimeoutHook = setTimeout(() => {
+        outerHook = setTimeout(() => {
           setLoadingOverlayState(
             (prev) => (prev === "visible" ? "fading" : "hidden") // Only set 'fading' if the current state is 'visible'
           );
-          innerTimeoutHook = setTimeout(
+          innerHook = setTimeout(
             () => setLoadingOverlayState("hidden"),
-            500 // 500 ms fade animation
+            FADE_ANIMATION_DURATION
           );
-        }, 1000); // 1 second delay one initial load, only relevant if the loading overlay is visible.
+        }, FADE_DELAY);
       }
     });
 
     return () => {
-      clearTimeout(outerTimeoutHook);
-      clearTimeout(innerTimeoutHook);
+      clearTimeout(outerHook);
+      clearTimeout(innerHook);
+      clearTimeout(timeoutHook);
       unsub();
     };
   }, []);