feat(loading): show dependency download progress

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);
  }