Add buttons with hints on what to do when stuck on Waiting for ap to …

…Load (software-mansion#962) This PR adds clear CTA buttons to the loading screen when we detect it is stuck in "Waiting for app to load" state. The buttons pop up after 12 seconds of waiting – we are reducing it down from 30 seconds. The possible options are: 1) open Radon IDE logs 2) force show device screen 3) open troubleshooting guide 4) Clean rebuild ![image](https://github.com/user-attachments/assets/e37dc46d-8227-4f1a-b768-8a5115f6b228) ### How Has This Been Tested: 1. Disable "app ready" event to force the app to get stuck on waiting 2. Test each individual option from the new menu
kewinzaq1 · Feb 18, 2025 · 3b10fe2 · 3b10fe2
1 parent 6c175d3
commit 3b10fe2
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 8 deletions.
diff --git a/packages/vscode-extension/lib/wrapper.js b/packages/vscode-extension/lib/wrapper.js
@@ -395,14 +395,12 @@ export function AppWrapper({ children, initialProps, fabric }) {
         appKey,
         navigationPlugins: navigationPlugins.map((plugin) => plugin.name),
       });
-      devtoolsAgent._bridge.send("RNIDE_devtoolPluginsChanged", {
-        plugins: Array.from(devtoolPlugins.values()),
-      });
       devtoolPluginsChanged = () => {
         devtoolsAgent._bridge.send("RNIDE_devtoolPluginsChanged", {
           plugins: Array.from(devtoolPlugins.values()),
         });
       };
+      devtoolPluginsChanged();
       return () => {
         devtoolPluginsChanged = undefined;
       };

diff --git a/packages/vscode-extension/src/webview/components/PreviewLoader.css b/packages/vscode-extension/src/webview/components/PreviewLoader.css
@@ -3,6 +3,32 @@
   cursor: pointer;
 }
 
+.preview-loader-center-pad {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 75%;
+}
+
+.preview-loader-waiting-actions {
+  position: relative;
+  bottom: 0;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: stretch;
+}
+
+.preview-loader-waiting-actions a {
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+}
+
 .preview-loader-button-group {
   display: flex;
   justify-content: space-between;
@@ -26,6 +52,11 @@
   width: 100%;
 }
 
+.preview-loader-submessage {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
 .preview-loader-slow-progress {
   text-decoration: underline;
 }

diff --git a/packages/vscode-extension/src/webview/components/PreviewLoader.tsx b/packages/vscode-extension/src/webview/components/PreviewLoader.tsx
@@ -8,6 +8,7 @@ import ProgressBar from "./shared/ProgressBar";
 
 import { StartupMessage, StartupStageWeight } from "../../common/Project";
 import { useProject } from "../providers/ProjectProvider";
+import Button from "./shared/Button";
 
 const startupStageWeightSum = StartupStageWeight.map((item) => item.weight).reduce(
   (acc, cur) => acc + cur,
@@ -48,9 +49,9 @@ function PreviewLoader({ onRequestShowPreview }: { onRequestShowPreview: () => v
   useEffect(() => {
     setIsLoadingSlowly(false);
 
-    // we show the slow loading message after 30 seconds for each phase,
+    // we show the slow loading message after 12 seconds for each phase,
     // but for the native build phase we show it after 5 seconds.
-    let timeoutMs = 30_000;
+    let timeoutMs = 12_000;
     if (projectState.startupMessage === StartupMessage.Building) {
       timeoutMs = 5_000;
     }
@@ -72,8 +73,12 @@ function PreviewLoader({ onRequestShowPreview }: { onRequestShowPreview: () => v
     }
   }
 
+  const isWaitingForApp = projectState.startupMessage === StartupMessage.WaitingForAppToLoad;
+  const isBuilding = projectState.startupMessage === StartupMessage.Building;
+
   return (
     <>
+      <div className="preview-loader-center-pad" />
       <button className="preview-loader-container" onClick={handleLoaderClick}>
         <div className="preview-loader-button-group">
           <StartupMessageComponent
@@ -82,9 +87,7 @@ function PreviewLoader({ onRequestShowPreview }: { onRequestShowPreview: () => v
               isLoadingSlowly && "preview-loader-slow-progress"
             )}>
             {projectState.startupMessage}
-            {isLoadingSlowly && projectState.startupMessage === StartupMessage.Building
-              ? " (open logs)"
-              : ""}
+            {isLoadingSlowly && isBuilding ? " (open logs)" : ""}
           </StartupMessageComponent>
           {projectState.stageProgress !== undefined && (
             <div className="preview-loader-stage-progress">
@@ -94,6 +97,32 @@ function PreviewLoader({ onRequestShowPreview }: { onRequestShowPreview: () => v
         </div>
       </button>
       <ProgressBar progress={progress} />
+      <div className="preview-loader-center-pad">
+        {isLoadingSlowly && isWaitingForApp && (
+          <>
+            <div className="preview-loader-submessage">
+              Loading app takes longer than expected. If nothing happens after a while try the below
+              options to troubleshoot:
+            </div>
+            <div className="preview-loader-waiting-actions">
+              <Button type="secondary" onClick={() => project.focusExtensionLogsOutput()}>
+                <span className="codicon codicon-output" /> Open Radon IDE Logs
+              </Button>
+              <Button type="secondary" onClick={onRequestShowPreview}>
+                <span className="codicon codicon-open-preview" /> Force show device screen
+              </Button>
+              <a href="https://ide.swmansion.com/docs/guides/troubleshooting" target="_blank">
+                <Button type="secondary">
+                  <span className="codicon codicon-browser" /> Visit troubleshoot guide
+                </Button>
+              </a>
+              <Button type="secondary" onClick={() => project.restart("all")}>
+                <span className="codicon codicon-refresh" /> Clean rebuild project
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
     </>
   );
 }