From 0697f91bf90bbdb7320cff7ee1c006f6fde9ea03 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Tue, 3 Jan 2023 18:58:42 +0200
Subject: [PATCH] Step display on connection overlay (#8682)

---
 packages/apps/src/overlays/Base.tsx       | 4 +++-
 packages/apps/src/overlays/Connecting.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx
index 451bad2066..2729ca2bfa 100644
--- a/packages/apps/src/overlays/Base.tsx
+++ b/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;
diff --git a/packages/apps/src/overlays/Connecting.tsx b/packages/apps/src/overlays/Connecting.tsx
index 29e7a8f5dc..24189d3a23 100644
--- a/packages/apps/src/overlays/Connecting.tsx
+++ b/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) {