feature(code/frontend): show loading spinner when loading file/struct…

…ure tree (#32775)
elastic · Mar 9, 2019 · 4367231 · 4367231
1 parent bea3503
commit 4367231
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx
@@ -330,7 +330,7 @@ class CodeContent extends React.PureComponent<Props> {
           );
         } else if (this.props.file!.isImage) {
           return (
-            <div className="autoMargin">
+            <div className="code-auto-margin">
               <img src={url} alt={url} />
             </div>
           );

diff --git a/x-pack/plugins/code/public/components/main/main.tsx b/x-pack/plugins/code/public/components/main/main.tsx
@@ -33,6 +33,8 @@ const Container = styled.div`
 
 interface Props extends RouteComponentProps<MainRouteParams> {
   isNotFound: boolean;
+  loadingFileTree: boolean;
+  loadingStructureTree: boolean;
 }
 
 class CodeMain extends React.Component<Props> {
@@ -65,14 +67,18 @@ class CodeMain extends React.Component<Props> {
   }
 
   public render() {
-    if (this.props.isNotFound) {
+    const { loadingFileTree, loadingStructureTree, isNotFound } = this.props;
+    if (isNotFound) {
       return <NotFound />;
     }
     return (
       <Root>
         <Container>
           <React.Fragment>
-            <SideTabs />
+            <SideTabs
+              loadingFileTree={loadingFileTree}
+              loadingStructureTree={loadingStructureTree}
+            />
             <Content />
           </React.Fragment>
         </Container>
@@ -84,6 +90,8 @@ class CodeMain extends React.Component<Props> {
 
 const mapStateToProps = (state: RootState) => ({
   isNotFound: state.file.isNotFound,
+  loadingFileTree: state.file.loading,
+  loadingStructureTree: state.symbol.loading,
 });
 
 export const Main = connect(

diff --git a/x-pack/plugins/code/public/components/main/side_tabs.tsx b/x-pack/plugins/code/public/components/main/side_tabs.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTabbedContent } from '@elastic/eui';
+import { EuiLoadingSpinner, EuiSpacer, EuiTabbedContent, EuiText } from '@elastic/eui';
 import { parse as parseQuery } from 'querystring';
 import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
@@ -19,7 +19,12 @@ enum Tabs {
   structure = 'structure',
 }
 
-class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRouteParams>> {
+interface Props extends RouteComponentProps<MainRouteParams> {
+  loadingFileTree: boolean;
+  loadingStructureTree: boolean;
+}
+
+class CodeSideTabs extends React.PureComponent<Props> {
   public get sideTab(): Tabs {
     const { search } = this.props.location;
     let qs = search;
@@ -30,14 +35,28 @@ class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRoutePara
     return tab === Tabs.structure ? Tabs.structure : Tabs.file;
   }
 
+  public renderLoadingSpinner(text: string) {
+    return (
+      <div>
+        <EuiSpacer size="xl" />
+        <EuiSpacer size="xl" />
+        <EuiText textAlign="center">Loading {text} tree</EuiText>
+        <EuiSpacer size="m" />
+        <EuiText textAlign="center">
+          <EuiLoadingSpinner size="xl" />
+        </EuiText>
+      </div>
+    );
+  }
+
   public get tabs() {
     return [
       {
         id: Tabs.file,
         name: 'File',
         content: (
           <div className="codeFileTree--container">
-            <FileTree />
+            {this.props.loadingFileTree ? this.renderLoadingSpinner('file') : <FileTree />}
           </div>
         ),
         isSelected: Tabs.file === this.sideTab,
@@ -46,7 +65,11 @@ class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRoutePara
       {
         id: Tabs.structure,
         name: 'Structure',
-        content: <SymbolTree />,
+        content: this.props.loadingFileTree ? (
+          this.renderLoadingSpinner('structure')
+        ) : (
+          <SymbolTree />
+        ),
         isSelected: Tabs.structure === this.sideTab,
         disabled: this.props.match.params.pathType === PathTypes.tree,
         'data-test-subj': 'codeStructureTreeTab',