From 3b10fe2811ec6af2dfe09f4b702d3cec1ce18783 Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Tue, 18 Feb 2025 10:50:08 +0000 Subject: [PATCH] Add buttons with hints on what to do when stuck on Waiting for ap to Load (#962) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- packages/vscode-extension/lib/wrapper.js | 4 +- .../src/webview/components/PreviewLoader.css | 31 +++++++++++++++ .../src/webview/components/PreviewLoader.tsx | 39 ++++++++++++++++--- 3 files changed, 66 insertions(+), 8 deletions(-) diff --git a/packages/vscode-extension/lib/wrapper.js b/packages/vscode-extension/lib/wrapper.js index 8475f07ad..dde960c86 100644 --- 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 index 062026ce1..748b991f7 100644 --- 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 index 076027c91..ddc9eb5f5 100644 --- 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 ( <> +
+
+ {isLoadingSlowly && isWaitingForApp && ( + <> +
+ Loading app takes longer than expected. If nothing happens after a while try the below + options to troubleshoot: +
+
+ + + + + + +
+ + )} +
); }