add disconnection message (#53883)

Summary:
Pull Request resolved: #53883

Changelog: [General][Added] - new banner added to indicate that Fast Refresh has lost connection, and that the app needs to be restarted to reconnect

When HMR were getting disconnected, we were not giving any indication for the user.

This lead to situations were the connection is re-established, but HMR is still disconnected, which is unexpected for users.

Instead, raise a banner hinting the user to reload the app to reconnect.

Reviewed By: huntie

Differential Revision: D82726853

fbshipit-source-id: d5f264547b2af89e9dc2a9046d063efe1145d690

Author: vzaidman

packages/react-native/Libraries/Utilities/DevLoadingView.js

@@ -14,29 +14,37 @@ import NativeDevLoadingView from './NativeDevLoadingView';
 
 const COLOR_SCHEME = {
   dark: {
+    load: {
+      backgroundColor: '#fafafa',
+      textColor: '#242526',
+    },
     refresh: {
       backgroundColor: '#2584e8',
       textColor: '#ffffff',
     },
-    load: {
-      backgroundColor: '#fafafa',
-      textColor: '#242526',
+    error: {
+      backgroundColor: '#1065AF',
+      textColor: '#ffffff',
     },
   },
   default: {
+    load: {
+      backgroundColor: '#404040',
+      textColor: '#ffffff',
+    },
     refresh: {
       backgroundColor: '#2584e8',
       textColor: '#ffffff',
     },
-    load: {
-      backgroundColor: '#404040',
+    error: {
+      backgroundColor: '#1065AF',
       textColor: '#ffffff',
     },
   },
 };
 
 export default {
-  showMessage(message: string, type: 'load' | 'refresh') {
+  showMessage(message: string, type: 'load' | 'refresh' | 'error') {
     if (NativeDevLoadingView) {
       const colorScheme =
         getColorScheme() === 'dark' ? COLOR_SCHEME.dark : COLOR_SCHEME.default;

packages/react-native/Libraries/Utilities/HMRClient.js

@@ -232,8 +232,6 @@ Error: ${e.message}`;
     });
 
     client.on('error', data => {
-      DevLoadingView.hide();
-
       if (data.type === 'GraphNotFoundError') {
         client.close();
         setHMRUnavailableReason(
@@ -253,8 +251,6 @@ Error: ${e.message}`;
     });
 
     client.on('close', closeEvent => {
-      DevLoadingView.hide();
-
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5
       const isNormalOrUnsetCloseReason =
@@ -296,10 +292,17 @@ function setHMRUnavailableReason(reason: string) {
   }
   hmrUnavailableReason = reason;
 
+  const DevLoadingView = require('./DevLoadingView').default;
+  DevLoadingView.hide();
+
   // We only want to show a warning if Fast Refresh is on *and* if we ever
   // previously managed to connect successfully. We don't want to show
   // the warning to native engineers who use cached bundles without Metro.
   if (hmrClient.isEnabled() && didConnect) {
+    DevLoadingView.showMessage(
+      'Fast Refresh disconnected. Reload app to reconnect.',
+      'error',
+    );
     console.warn(reason);
     // (Not using the `warning` module to prevent a Buck cycle.)
   }