diff --git a/apps/remix-ide/src/app/files/remixd-handle.js b/apps/remix-ide/src/app/files/remixd-handle.js
index 87b4cc834b..7656a67fc9 100644
--- a/apps/remix-ide/src/app/files/remixd-handle.js
+++ b/apps/remix-ide/src/app/files/remixd-handle.js
@@ -95,6 +95,7 @@ export class RemixdHandle extends WebsocketPlugin {
           label: 'Connect',
           fn: () => {
             try {
+              this.locahostProvider.event.trigger('loading')
               super.activate()
               setTimeout(() => {
                 if (!this.socket || (this.socket && this.socket.readyState === 3)) { // 3 means connection closed
diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
index 6d5136c201..99eb50335d 100644
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -91,6 +91,10 @@ export const Workspace = (props: WorkspaceProps) => {
       setWorkspace(props.workspaces.length > 0 ? props.workspaces[0] : NO_WORKSPACE)
     })
 
+    props.localhost.event.register('loading', () => {
+      remixdExplorer.loading()
+    })
+
     if (props.initialWorkspace) {
       props.workspace.setWorkspace(props.initialWorkspace)
       setState(prevState => {
@@ -120,7 +124,8 @@ export const Workspace = (props: WorkspaceProps) => {
         fn: () => {}
       },
       handleHide: null
-    }
+    },
+    loadingLocalhost: false
   })
 
   /* workspace creation, renaming and deletion */
@@ -231,13 +236,18 @@ export const Workspace = (props: WorkspaceProps) => {
       if (state.currentWorkspace === LOCALHOST) setWorkspace(NO_WORKSPACE)
       props.fileManager.setMode('browser')
       setState(prevState => {
-        return { ...prevState, hideRemixdExplorer: true }
+        return { ...prevState, hideRemixdExplorer: true, loadingLocalhost: false }
       })
     },
     show: () => {
       props.fileManager.setMode('localhost')
       setState(prevState => {
-        return { ...prevState, hideRemixdExplorer: false }
+        return { ...prevState, hideRemixdExplorer: false, loadingLocalhost: false }
+      })
+    },
+    loading: () => {
+      setState(prevState => {
+        return { ...prevState, loadingLocalhost: true }
       })
     }
   }
@@ -372,19 +382,22 @@ export const Workspace = (props: WorkspaceProps) => {
                   />
               }
             </div>
-            <div className='pl-2 filesystemexplorer remixui_treeview'>
-              { !state.hideRemixdExplorer &&
-                  <FileExplorer
-                    name='localhost'
-                    registry={props.registry}
-                    filesProvider={props.localhost}
-                    menuItems={['createNewFile', 'createNewFolder']}
-                    plugin={props.plugin}
-                    focusRoot={state.reset}
-                    contextMenuItems={props.registeredMenuItems}
-                  />
-              }
-            </div>
+            {
+              state.loadingLocalhost ? <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>
+                : <div className='pl-2 filesystemexplorer remixui_treeview'>
+                  { !state.hideRemixdExplorer &&
+                      <FileExplorer
+                        name='localhost'
+                        registry={props.registry}
+                        filesProvider={props.localhost}
+                        menuItems={['createNewFile', 'createNewFolder']}
+                        plugin={props.plugin}
+                        focusRoot={state.reset}
+                        contextMenuItems={props.registeredMenuItems}
+                      />
+                  }
+                </div>
+            }
             <div className='pl-2 remixui_treeview'>
               { false && <FileExplorer
                 name='browser'