Retry and UX improvements when listing simulators

Summary:
If we fail to obtain simulators, retry.

Also, display platform title regardless.

Reviewed By: antonk52

Differential Revision: D50223890

fbshipit-source-id: 7d8176521ad6bf75044fe4e3ef6a6e369bed2358

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<string>('Loading...');
+    const [androidMessage, setAndroidMessage] = useState<string>('Loading...');
+
     const [favoriteVirtualDevices, setFavoriteVirtualDevices] =
       useLocalStorageState<string[]>('favourite-virtual-devices', []);
 
@@ -106,33 +109,48 @@ export const LaunchEmulatorDialog = withTrackingScope(
     };
 
     useEffect(() => {
+      const getiOSSimulators = async () => {
         if (!iosEnabled) {
           return;
         }
-      getRenderHostInstance()
+        setWaitingForIos(true);
-        .flipperServer.exec('ios-get-simulators', false)
+        try {
-        .then((emulators) => {
+          const simulators = await getRenderHostInstance().flipperServer.exec(
+            'ios-get-simulators',
+            false,
+          );
           setWaitingForIos(false);
-          setIosEmulators(emulators);
+          setIosEmulators(simulators);
-        })
+        } catch (error) {
-        .catch((e) => {
+          console.warn('Failed to find iOS simulators', error);
-          console.warn('Failed to find simulators', e);
+          setiOSMessage(`Error: ${error.message} \nRetrying...`);
-        });
+          setTimeout(getiOSSimulators, 1000);
+        }
+      };
+
+      getiOSSimulators();
     }, [iosEnabled]);
 
     useEffect(() => {
+      const getAndroidEmulators = async () => {
         if (!androidEnabled) {
           return;
         }
-      getRenderHostInstance()
+        setWaitingForAndroid(true);
-        .flipperServer.exec('android-get-emulators')
+        try {
-        .then((emulators) => {
+          const emulators = await getRenderHostInstance().flipperServer.exec(
+            'android-get-emulators',
+          );
           setWaitingForAndroid(false);
           setAndroidEmulators(emulators);
-        })
+        } catch (error) {
-        .catch((e) => {
+          console.warn('Failed to find Android emulators', error);
-          console.warn('Failed to find emulators', e);
+          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" />,
-        <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) => ({

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/))
+  expect(await renderer.findAllByText(/Loading/)).toMatchInlineSnapshot(`
-    .toMatchInlineSnapshot(`
+    [
       <div
-      class="ant-alert-message"
-    >
-      No virtual devices available.
-      <br />
-      <a
         class="ant-typography"
-        href="http://fbflipper.com/docs/getting-started/troubleshooting/general/#i-see-no-emulators-available"
+        style="text-align: center;"
       >
-        Learn more
+        Loading...
-      </a>
+      </div>,
-    </div>
+      <div
+        class="ant-typography"
+        style="text-align: center;"
+      >
+        Loading...
+      </div>,
+    ]
   `);
 });