Fix loading state for saving a visualization (#68)

* fixed loading state for saving a visualization UrbanOS-Examples/discovery_ui#8 co-authored-by: Cameron Marsh <[email protected]> * formatting UrbanOS-Examples/discovery_ui#8 co-authored-by: Cameron Marsh <[email protected]>
UrbanOS-Public · Oct 21, 2019 · c0237ec · c0237ec
1 parent f6793ae
commit c0237ec
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smartcitiesdata/react-discovery-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {

diff --git a/src/pages/dataset-view/dataset-view.js b/src/pages/dataset-view/dataset-view.js
@@ -41,37 +41,43 @@ export default class extends Component {
   render() {
     if (!this.props.isDatasetLoaded) {
       return (
-        <dataset-visualization>
+        <dataset-view>
           <LoadingElement />
-        </dataset-visualization>
+        </dataset-view>
       );
     }
 
     if (this.props.isRemoteDataset || this.props.isHostDataset) {
-      return <DatasetDetailView />;
+      return (
+        <dataset-view>
+          <DatasetDetailView />
+        </dataset-view>
+      )
     }
 
     return (
-      <Tabs
-        className="dataset-view"
-        selectedIndex={this.state.index}
-        onSelect={tabIndex => this.setState({ index: tabIndex })}
-      >
-        <TabList>
-          <Tab>Dataset Details</Tab>
-          <Tab>Visualize <ChartIcon className='chartIcon' /></Tab>
-          <Tab>Write SQL <SQLIcon className='sqlIcon' /></Tab>
-        </TabList>
-        <TabPanel forceRender={true}>
-          <DatasetDetailView />
-        </TabPanel>
-        <TabPanel>
-          <ChartView />
-        </TabPanel>
-        <TabPanel>
-          <QueryView />
-        </TabPanel>
-      </Tabs>
+      <dataset-view>
+        <Tabs
+          className="dataset-view"
+          selectedIndex={this.state.index}
+          onSelect={tabIndex => this.setState({ index: tabIndex })}
+        >
+          <TabList>
+            <Tab>Dataset Details</Tab>
+            <Tab>Visualize <ChartIcon className='chartIcon' /></Tab>
+            <Tab>Write SQL <SQLIcon className='sqlIcon' /></Tab>
+          </TabList>
+          <TabPanel forceRender={true}>
+            <DatasetDetailView />
+          </TabPanel>
+          <TabPanel>
+            <ChartView />
+          </TabPanel>
+          <TabPanel>
+            <QueryView />
+          </TabPanel>
+        </Tabs>
+      </dataset-view>
     );
   }
 }
diff --git a/src/pages/dataset-view/dataset-view.scss b/src/pages/dataset-view/dataset-view.scss
@@ -1,68 +1,70 @@
 @import "../../styles/mixins.scss";
 @import "../../styles/variables.scss";
 
-.chartIcon {
+dataset-view {
+  .chartIcon {
     padding-left: 5px;
     path {
-        fill: $medium-grey;
+      fill: $medium-grey;
     }
-}
+  }
 
-.sqlIcon {
+  .sqlIcon {
     padding-left: 5px;
     fill: $medium-grey;
-}
+  }
 
-.react-tabs__tab-list {
+  .react-tabs__tab-list {
     border-bottom: 0;
     box-shadow: 0px 1px 3px $light-grey;
     margin: 0;
     padding: 0;
-}
+  }
 
-.react-tabs__tab {
+  .react-tabs__tab {
     display: inline-block;
     border: 0;
     position: relative;
     list-style: initial;
     padding: 12px 24px;
     cursor: pointer;
-    color: $medium-grey
-}
+    color: $medium-grey;
+  }
 
-.react-tabs__tab--selected {
+  .react-tabs__tab--selected {
     background: transparent;
     border-bottom: 5px solid;
     border-color: $light-blue;
     color: $almost-black;
 
-    .sqlIcon{
-        padding-left: 5px;
-        fill: $almost-black;
+    .sqlIcon {
+      padding-left: 5px;
+      fill: $almost-black;
     }
 
     .chartIcon {
-        path {
-            fill: $almost-black;
-        }
+      path {
+        fill: $almost-black;
+      }
     }
-}
+  }
 
-.react-tabs__tab:hover {
+  .react-tabs__tab:hover {
     color: $almost-black;
 
-    .sqlIcon{
-        padding-left: 5px;
-        fill: $almost-black;
+    .sqlIcon {
+      padding-left: 5px;
+      fill: $almost-black;
     }
 
     .chartIcon {
-        path {
-            fill: $almost-black;
-        }
+      path {
+        fill: $almost-black;
+      }
     }
-}
+  }
 
-loading-element {
+  loading-element {
     @include default-loading-icon();
+  }
 }