Added loader for localhost

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

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,7 +382,9 @@ export const Workspace = (props: WorkspaceProps) => {
                   />
               }
             </div>
-            <div className='pl-2 filesystemexplorer remixui_treeview'>
+            {
+              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'
@@ -385,6 +397,7 @@ export const Workspace = (props: WorkspaceProps) => {
                       />
                   }
                 </div>
+            }
             <div className='pl-2 remixui_treeview'>
               { false && <FileExplorer
                 name='browser'