Makes clearer the metadata for db still loading

sqlectron · Nov 6, 2016 · 503ee9a · 503ee9a
1 parent 4d3d1dc
commit 503ee9a
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 65 deletions.
diff --git a/src/renderer/components/database-filter.jsx b/src/renderer/components/database-filter.jsx
@@ -4,6 +4,7 @@ import React, { Component, PropTypes } from 'react';
 export default class DatabaseFilter extends Component {
   static propTypes = {
     value: PropTypes.string,
+    placeholder: PropTypes.string,
     isFetching: PropTypes.bool.isRequired,
     onFilterChange: PropTypes.func.isRequired,
   }
@@ -17,13 +18,14 @@ export default class DatabaseFilter extends Component {
   }
 
   render() {
-    const { value, isFetching } = this.props;
+    const { value, placeholder, isFetching } = this.props;
     return (
       <div className={`ui icon input ${isFetching ? 'loading' : ''}`}>
         <input type="text"
-          placeholder="Search..."
+          placeholder={placeholder || 'Search...'}
           value={value}
           ref="searchInput"
+          disabled={isFetching}
           onChange={::this.onFilterChange} />
         <i className="search icon"></i>
       </div>

diff --git a/src/renderer/components/database-list-item.jsx b/src/renderer/components/database-list-item.jsx
@@ -114,25 +114,7 @@ export default class DatabaseListItem extends Component {
     this.setState({ collapsed: !this.state.collapsed });
   }
 
-  renderHeader(database) {
-    const collapseCssClass = !this.isMetadataLoaded() || this.state.collapsed ? 'right' : 'down';
-
-    return (
-      <span
-        className="header"
-        onDoubleClick={() => this.onHeaderDoubleClick(database)}
-        onContextMenu={::this.onContextMenu}
-        style={STYLE.database}>
-        <i className={`${collapseCssClass} triangle icon`}
-          style={{ cursor: 'pointer' }}
-          onClick={() => this.onHeaderDoubleClick(database)}></i>
-        <i className="database icon"></i>
-        {database.name}
-      </span>
-    );
-  }
-
-  render() {
+  renderBody(isMetadataLoaded, isCurrentDB) {
     const { filter } = this.state;
     const {
       client,
@@ -146,7 +128,6 @@ export default class DatabaseListItem extends Component {
       onExecuteDefaultQuery,
       onSelectTable,
       onGetSQLScript,
-      currentDB,
     } = this.props;
 
     let filteredTables;
@@ -155,7 +136,6 @@ export default class DatabaseListItem extends Component {
     let filteredProcedures;
 
     const cssStyleItems = {};
-    const isMetadataLoaded = this.isMetadataLoaded();
     if (this.state.collapsed || !isMetadataLoaded) {
       cssStyleItems.display = 'none';
     } else {
@@ -165,6 +145,92 @@ export default class DatabaseListItem extends Component {
       filteredProcedures = this.filterItems(filter, procedures);
     }
 
+    const loadingContent = (
+      <div className="ui list">
+        <div className="item">
+          <DatabaseFilter
+            isFetching
+            placeholder="Loading..."
+            onFilterChange={() => {}} />
+        </div>
+      </div>
+    );
+
+    const fullConent = (
+      <div className="ui list" style={cssStyleItems}>
+        <div className="item" style={cssStyleItems}>
+          <DatabaseFilter
+            ref="filter"
+            value={filter}
+            isFetching={!isMetadataLoaded}
+            onFilterChange={::this.onFilterChange} />
+        </div>
+        <DatabaseListItemMetatada
+          title="Tables"
+          client={client}
+          items={filteredTables || tables}
+          columnsByTable={columnsByTable}
+          triggersByTable={triggersByTable}
+          database={database}
+          onExecuteDefaultQuery={onExecuteDefaultQuery}
+          onSelectItem={onSelectTable}
+          onGetSQLScript={onGetSQLScript} />
+        <DatabaseListItemMetatada
+          collapsed
+          title="Views"
+          client={client}
+          items={filteredViews || views}
+          database={database}
+          onExecuteDefaultQuery={onExecuteDefaultQuery}
+          onGetSQLScript={onGetSQLScript} />
+        <DatabaseListItemMetatada
+          collapsed
+          title="Functions"
+          client={client}
+          items={filteredFunctions || functions}
+          database={database}
+          onGetSQLScript={onGetSQLScript} />
+        <DatabaseListItemMetatada
+          collapsed
+          title="Procedures"
+          client={client}
+          items={filteredProcedures || procedures}
+          database={database}
+          onGetSQLScript={onGetSQLScript} />
+      </div>
+    );
+
+    return (
+      isCurrentDB && !isMetadataLoaded
+        ? loadingContent
+        : fullConent
+    );
+  }
+
+  renderHeader(isMetadataLoaded) {
+    const { database } = this.props;
+
+    const collapseCssClass = !isMetadataLoaded || this.state.collapsed ? 'right' : 'down';
+
+    return (
+      <span
+        className="header"
+        onDoubleClick={() => this.onHeaderDoubleClick(database)}
+        onContextMenu={::this.onContextMenu}
+        style={STYLE.database}>
+        <i className={`${collapseCssClass} triangle icon`}
+          style={{ cursor: 'pointer' }}
+          onClick={() => this.onHeaderDoubleClick(database)}></i>
+        <i className="database icon"></i>
+        {database.name}
+      </span>
+    );
+  }
+
+  render() {
+    const { database, currentDB } = this.props;
+
+    const isMetadataLoaded = this.isMetadataLoaded();
     const isCurrentDB = currentDB === database.name;
 
     let styleComponent = {};
@@ -176,48 +242,8 @@ export default class DatabaseListItem extends Component {
 
     return (
       <div className={`item ${isCurrentDB ? 'active' : ''}`} style={styleComponent}>
-        {this.renderHeader(database)}
-        <div className="ui list" style={cssStyleItems}>
-          <div className="item" style={cssStyleItems}>
-            <DatabaseFilter
-              ref="filter"
-              value={filter}
-              isFetching={!isMetadataLoaded}
-              onFilterChange={::this.onFilterChange} />
-          </div>
-          <DatabaseListItemMetatada
-            title="Tables"
-            client={client}
-            items={filteredTables || tables}
-            columnsByTable={columnsByTable}
-            triggersByTable={triggersByTable}
-            database={database}
-            onExecuteDefaultQuery={onExecuteDefaultQuery}
-            onSelectItem={onSelectTable}
-            onGetSQLScript={onGetSQLScript} />
-          <DatabaseListItemMetatada
-            collapsed
-            title="Views"
-            client={client}
-            items={filteredViews || views}
-            database={database}
-            onExecuteDefaultQuery={onExecuteDefaultQuery}
-            onGetSQLScript={onGetSQLScript} />
-          <DatabaseListItemMetatada
-            collapsed
-            title="Functions"
-            client={client}
-            items={filteredFunctions || functions}
-            database={database}
-            onGetSQLScript={onGetSQLScript} />
-          <DatabaseListItemMetatada
-            collapsed
-            title="Procedures"
-            client={client}
-            items={filteredProcedures || procedures}
-            database={database}
-            onGetSQLScript={onGetSQLScript} />
-        </div>
+        {this.renderHeader(isMetadataLoaded)}
+        {this.renderBody(isMetadataLoaded, isCurrentDB)}
       </div>
     );
   }