Step display on connection overlay (#8682)

packages/apps/src/overlays/Base.tsx

@@ -56,7 +56,8 @@ export default React.memo(styled(BaseOverlay)`
   position: fixed;
   right: 0.75rem;
   top: 0.75rem;
-  max-width: 55rem;
+  max-width: 42rem;
+  width: 42rem;
   z-index: 500;
 
   &:before {
@@ -87,6 +88,7 @@ export default React.memo(styled(BaseOverlay)`
   }
 
   .content {
+    align-items: center;
     display: flex;
     margin: 0 auto;
     max-width: 50rem;

packages/apps/src/overlays/Connecting.tsx

@@ -39,7 +39,13 @@ function Connecting ({ className }: Props): React.ReactElement<Props> | null {
         icon='globe'
         type='info'
       >
-        <div>{t<string>('Waiting to make a connection to the remote endpoint and finishing API initialization.')}</div>
+        <div>
+          {
+            isApiConnected
+              ? t<string>('Waiting to complete metadata retrieval from remote endpoint.')
+              : t<string>('Waiting to establish a connection with the remote endpoint.')
+          }
+        </div>
       </BaseOverlay>
     );
   } else if (isWaitingInjected) {