From f84f56614d34dbdb5f2e9b95f5825ff4296aca3e Mon Sep 17 00:00:00 2001
From: Pascal Hartig <realpassy@fb.com>
Date: Tue, 24 May 2022 07:55:40 -0700
Subject: [PATCH] Loading state for emulator launcher

Summary:
Our current loading state holder for the emulator launch dialogue is a "No emulators available" error message which may stay there for up to 5 seconds (in the case of only iOS enabled) before we see devices.

This adds a proper spinner that will show for as long there are pending device queries.

Changelog: Loading state for emulator launch dialogue

Reviewed By: nikoant

Differential Revision: D36598855

fbshipit-source-id: 64099596b48708b48a43f0208696a7dddc15007c
---
 .../appinspect/LaunchEmulator.tsx             | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

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 93bf6d333..cc952bf55 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx
@@ -17,7 +17,12 @@ import {
 } from '@ant-design/icons';
 import {Store} from '../../reducers';
 import {useStore} from '../../utils/useStore';
-import {Layout, renderReactRoot, withTrackingScope} from 'flipper-plugin';
+import {
+  Layout,
+  Spinner,
+  renderReactRoot,
+  withTrackingScope,
+} from 'flipper-plugin';
 import {Provider} from 'react-redux';
 import {IOSDeviceParams} from 'flipper-common';
 import {getRenderHostInstance} from '../../RenderHost';
@@ -80,6 +85,9 @@ export const LaunchEmulatorDialog = withTrackingScope(
 
     const [iosEmulators, setIosEmulators] = useState<IOSDeviceParams[]>([]);
     const [androidEmulators, setAndroidEmulators] = useState<string[]>([]);
+    const [waitingForIos, setWaitingForIos] = useState(iosEnabled);
+    const [waitingForAndroid, setWaitingForAndroid] = useState(androidEnabled);
+    const waitingForResults = waitingForIos || waitingForAndroid;
 
     useEffect(() => {
       if (!iosEnabled) {
@@ -88,6 +96,7 @@ export const LaunchEmulatorDialog = withTrackingScope(
       getRenderHostInstance()
         .flipperServer.exec('ios-get-simulators', false)
         .then((emulators) => {
+          setWaitingForIos(false);
           setIosEmulators(
             emulators.filter(
               (device) =>
@@ -108,6 +117,7 @@ export const LaunchEmulatorDialog = withTrackingScope(
       getRenderHostInstance()
         .flipperServer.exec('android-get-emulators')
         .then((emulators) => {
+          setWaitingForAndroid(false);
           setAndroidEmulators(emulators);
         })
         .catch((e) => {
@@ -176,6 +186,15 @@ export const LaunchEmulatorDialog = withTrackingScope(
       )),
     ];
 
+    const loadingSpinner = (
+      <>
+        {waitingForResults && <Spinner />}
+        {!waitingForResults && items.length === 0 && (
+          <Alert message="No emulators available" />
+        )}
+      </>
+    );
+
     return (
       <Modal
         visible
@@ -185,7 +204,8 @@ export const LaunchEmulatorDialog = withTrackingScope(
         footer={null}
         bodyStyle={{maxHeight: 400, height: 400, overflow: 'auto'}}>
         <Layout.Container gap>
-          {items.length ? items : <Alert message="No emulators available" />}
+          {items.length ? items : <></>}
+          {loadingSpinner}
         </Layout.Container>
       </Modal>
     );