feat(loading): show dependency download progress (#1146)

* feat(loading): show dependency download progress

* fix

Author: danilowoz

sandpack-client/src/clients/runtime/types.ts

@@ -106,4 +106,20 @@ export type SandpackRuntimeMessage = BaseSandpackMessage &
     | SandboxTestMessage
     | { type: "sign-in"; teamId: string }
     | { type: "sign-out" }
+    | {
+        type: "dependencies";
+        data:
+          | {
+              state: "downloading_manifest";
+            }
+          | {
+              state: "downloaded_module";
+              name: string;
+              total: number;
+              progress: number;
+            }
+          | {
+              state: "starting";
+            };
+      }
   );

sandpack-react/src/Playground.stories.tsx

@@ -11,30 +11,20 @@ export const Basic: React.FC = () => {
   return (
     <div style={{ height: "400vh" }}>
       <Sandpack
-        files={{
-          "/App.js": `export default function TodoList() {
-            return (
-              // This doesn't quite work!
-              <h1>Hedy Lamarr's Todos</h1>
-              <img
-                src="https://i.imgur.com/yXOvdOSs.jpg"
-                alt="Hedy Lamarr"
-                class="photo"
-              >
-              <ul>
-                <li>Invent new traffic lights
-                <li>Rehearse a movie scene
-                <li>Improve spectrum technology
-              </ul>
-            );
-          }
-          `,
-        }}
         options={{
-          initMode: "user-visible",
-          bundlerURL: "https://786946de.sandpack-bundler-4bw.pages.dev",
+          bundlerURL: "https://ymxnqs-3000.csb.app",
         }}
         template="react"
+        customSetup={{
+          dependencies: {
+            "react-content-loader": "latest",
+            "radix-ui": "latest",
+            "styled-components": "latest",
+            "react-dom": "latest",
+            react: "latest",
+            "react-table": "latest",
+          },
+        }}
       />
     </div>
   );

sandpack-react/src/hooks/useSandpackPreviewProgress.ts

@@ -56,7 +56,22 @@ export const useSandpackPreviewProgress = (
         }, timeout);
       }
 
-      if (message.type === "shell/progress" && !isReady) {
+      if (message.type === "dependencies") {
+        setLoadingMessage(() => {
+          switch (message.data.state) {
+            case "downloading_manifest":
+              return "[1/3] Downloading manifest";
+
+            case "downloaded_module":
+              return `[2/3] Downloaded ${message.data.name} (${message.data.progress}/${message.data.total})`;
+
+            case "starting":
+              return "[3/3] Starting";
+          }
+
+          return null;
+        });
+      } else if (message.type === "shell/progress" && !isReady) {
         if (!totalDependencies && message.data.state === "downloaded_module") {
           setTotalDependencies(message.data.totalPending);
         }