diff --git a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx index b6768f91d..8e93da8e1 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx @@ -94,6 +94,9 @@ export const LaunchEmulatorDialog = withTrackingScope( const [waitingForAndroid, setWaitingForAndroid] = useState(androidEnabled); const waitingForResults = waitingForIos || waitingForAndroid; + const [iOSMessage, setiOSMessage] = useState('Loading...'); + const [androidMessage, setAndroidMessage] = useState('Loading...'); + const [favoriteVirtualDevices, setFavoriteVirtualDevices] = useLocalStorageState('favourite-virtual-devices', []); @@ -106,33 +109,48 @@ export const LaunchEmulatorDialog = withTrackingScope( }; useEffect(() => { - if (!iosEnabled) { - return; - } - getRenderHostInstance() - .flipperServer.exec('ios-get-simulators', false) - .then((emulators) => { + const getiOSSimulators = async () => { + if (!iosEnabled) { + return; + } + setWaitingForIos(true); + try { + const simulators = await getRenderHostInstance().flipperServer.exec( + 'ios-get-simulators', + false, + ); setWaitingForIos(false); - setIosEmulators(emulators); - }) - .catch((e) => { - console.warn('Failed to find simulators', e); - }); + setIosEmulators(simulators); + } catch (error) { + console.warn('Failed to find iOS simulators', error); + setiOSMessage(`Error: ${error.message} \nRetrying...`); + setTimeout(getiOSSimulators, 1000); + } + }; + + getiOSSimulators(); }, [iosEnabled]); useEffect(() => { - if (!androidEnabled) { - return; - } - getRenderHostInstance() - .flipperServer.exec('android-get-emulators') - .then((emulators) => { + const getAndroidEmulators = async () => { + if (!androidEnabled) { + return; + } + setWaitingForAndroid(true); + try { + const emulators = await getRenderHostInstance().flipperServer.exec( + 'android-get-emulators', + ); setWaitingForAndroid(false); setAndroidEmulators(emulators); - }) - .catch((e) => { - console.warn('Failed to find emulators', e); - }); + } catch (error) { + console.warn('Failed to find Android emulators', error); + setAndroidMessage(`Error: ${error.message} \nRetrying...`); + setTimeout(getAndroidEmulators, 1000); + } + }; + + getAndroidEmulators(); }, [androidEnabled]); if (!iosEnabled && !androidEnabled) { @@ -140,8 +158,11 @@ export const LaunchEmulatorDialog = withTrackingScope( } const items = [ - androidEmulators.length > 0 ? ( - + <Title key="android-title" name="Android emulators" />, + androidEmulators.length == 0 ? ( + <Typography.Paragraph style={{textAlign: 'center'}}> + {androidMessage} + </Typography.Paragraph> ) : null, ...chain( androidEmulators.map((name) => ({ @@ -193,8 +214,11 @@ export const LaunchEmulatorDialog = withTrackingScope( }) .value(), - iosEmulators.length > 0 ? ( - <Title key="ios-title" name="iOS Simulators" /> + <Title key="ios-title" name="iOS Simulators" />, + iosEmulators.length == 0 ? ( + <Typography.Paragraph style={{textAlign: 'center'}}> + {iOSMessage} + </Typography.Paragraph> ) : null, ...chain(iosEmulators) .map((device) => ({ diff --git a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/__tests__/LaunchEmulator.spec.tsx b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/__tests__/LaunchEmulator.spec.tsx index cf433b8f7..c89d79590 100644 --- a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/__tests__/LaunchEmulator.spec.tsx +++ b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/__tests__/LaunchEmulator.spec.tsx @@ -44,20 +44,21 @@ test('Can render and launch android apps - no emulators', async () => { </Provider>, ); - expect(await renderer.findByText(/No virtual devices/)) - .toMatchInlineSnapshot(` - <div - class="ant-alert-message" - > - No virtual devices available. - <br /> - <a + expect(await renderer.findAllByText(/Loading/)).toMatchInlineSnapshot(` + [ + <div class="ant-typography" - href="http://fbflipper.com/docs/getting-started/troubleshooting/general/#i-see-no-emulators-available" + style="text-align: center;" > - Learn more - </a> - </div> + Loading... + </div>, + <div + class="ant-typography" + style="text-align: center;" + > + Loading... + </div>, + ] `); });