fix: handle Preview fail

Coolinnnn · Jan 6, 2025 · 4447a7b · 4447a7b
1 parent 7fce613
commit 4447a7b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/apps/web/components/ComponentPagePreview.tsx b/apps/web/components/ComponentPagePreview.tsx
@@ -146,6 +146,9 @@ export function ComponentPagePreview({
     demoComponentFile ?? mainComponentFile ?? "",
   )
 
+  const [previewError, setPreviewError] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
   if (!css)
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3 w-full">
@@ -209,13 +212,40 @@ export function ComponentPagePreview({
           className="flex-grow h-full relative"
           transition={{ duration: 0.3 }}
         >
-          <Suspense fallback={<LoadingSpinner />}>
-            <SandpackPreview
-              showSandpackErrorOverlay={false}
-              showOpenInCodeSandbox={process.env.NODE_ENV === "development"}
-              showRefreshButton={false}
-            />
+          <Suspense fallback={<LoadingSpinner text="Loading preview..." />}>
+            {previewError ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3">
+                <p className="text-muted-foreground text-sm">
+                  Failed to load preview
+                </p>
+                <button
+                  onClick={() => {
+                    setPreviewError(false)
+                    setIsLoading(true)
+                  }}
+                  className="text-sm underline text-muted-foreground hover:text-foreground"
+                >
+                  Try again
+                </button>
+              </div>
+            ) : (
+              <SandpackPreview
+                showSandpackErrorOverlay={false}
+                showOpenInCodeSandbox={process.env.NODE_ENV === "development"}
+                showRefreshButton={false}
+                onLoad={() => setIsLoading(false)}
+                onError={() => {
+                  setPreviewError(true)
+                  setIsLoading(false)
+                }}
+              />
+            )}
           </Suspense>
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+              <LoadingSpinner text="Starting preview..." />
+            </div>
+          )}
         </motion.div>
       </SandpackProviderUnstyled>
       <div className="h-full w-full md:max-w-[30%] min-h-90vh overflow-hidden rounded-lg border border-border min-w-[350px] dark:bg-[#151515]">

diff --git a/apps/web/components/LoadingSpinner.tsx b/apps/web/components/LoadingSpinner.tsx
@@ -1,10 +1,10 @@
-export const LoadingSpinner = () => (
+export const LoadingSpinner = ({ text = "Loading..." }: { text?: string }) => (
   <div className="w-full h-full flex items-center justify-center bg-background">
     <div className="relative w-4 h-4">
       <div className="absolute inset-0 bg-foreground/30 rounded-full animate-pulse-slow"></div>
       <div className="absolute inset-0 bg-foreground rounded-full animate-pulse-fast"></div>
     </div>
-    <span className="ml-3 text-foreground">Loading...</span>
+    <span className="ml-3 text-foreground">{text}</span>
   </div>
 )