Display loading state for tag key and value lists

Co-authored-by: Chris Henn <chris.henn@influxdata.com>
Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>

ui/src/ifql/components/DatabaseListItem.tsx

@@ -41,7 +41,7 @@ class DatabaseListItem extends PureComponent<Props, State> {
 
   public render() {
     const {db, service} = this.props
-    const {tags, searchTerm} = this.state
+    const {searchTerm} = this.state
 
     return (
       <div className={this.className} onClick={this.handleClick}>

ui/src/ifql/components/LoaderSkeleton.tsx

@@ -0,0 +1,32 @@
+import React, {SFC, MouseEvent} from 'react'
+
+const handleClick = (e: MouseEvent<HTMLDivElement>): void => {
+  e.stopPropagation()
+}
+
+const LoaderSkeleton: SFC = () => {
+  return (
+    <>
+      <div className="ifql-schema-tree ifql-tree-node" onClick={handleClick}>
+        <div className="ifql-schema-item skeleton">
+          <div className="ifql-schema-item-toggle" />
+          <div className="ifql-schema-item-skeleton" style={{width: '160px'}} />
+        </div>
+      </div>
+      <div className="ifql-schema-tree ifql-tree-node">
+        <div className="ifql-schema-item skeleton">
+          <div className="ifql-schema-item-toggle" />
+          <div className="ifql-schema-item-skeleton" style={{width: '200px'}} />
+        </div>
+      </div>
+      <div className="ifql-schema-tree ifql-tree-node">
+        <div className="ifql-schema-item skeleton">
+          <div className="ifql-schema-item-toggle" />
+          <div className="ifql-schema-item-skeleton" style={{width: '120px'}} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default LoaderSkeleton

ui/src/ifql/components/TagListItem.tsx

@@ -6,6 +6,7 @@ import {Service, SchemaFilter, RemoteDataState} from 'src/types'
 import {tagValues as fetchTagValues} from 'src/shared/apis/v2/metaQueries'
 import parseValuesColumn from 'src/shared/parsing/v2/tags'
 import TagValueList from 'src/ifql/components/TagValueList'
+import LoaderSkeleton from 'src/ifql/components/LoaderSkeleton'
 
 interface Props {
   tag: string
@@ -60,19 +61,26 @@ export default class TagListItem extends PureComponent<Props, State> {
                 onChange={this.onSearch}
               />
             </div>
-            <TagValueList
-              db={db}
-              service={service}
-              values={tagValues}
-              tag={tag}
-              filter={filter}
-            />
+            {this.isLoading && <LoaderSkeleton />}
+            {!this.isLoading && (
+              <TagValueList
+                db={db}
+                service={service}
+                values={tagValues}
+                tag={tag}
+                filter={filter}
+              />
+            )}
           </>
         )}
       </div>
     )
   }
 
+  private get isLoading(): boolean {
+    return this.state.loading === RemoteDataState.Loading
+  }
+
   private onSearch = (e: ChangeEvent<HTMLInputElement>): void => {
     const searchTerm = e.target.value
 

ui/src/ifql/components/TagValueListItem.tsx

@@ -3,6 +3,7 @@ import React, {PureComponent, MouseEvent} from 'react'
 import {tagKeys as fetchTagKeys} from 'src/shared/apis/v2/metaQueries'
 import parseValuesColumn from 'src/shared/parsing/v2/tags'
 import TagList from 'src/ifql/components/TagList'
+import LoaderSkeleton from 'src/ifql/components/LoaderSkeleton'
 import {Service, SchemaFilter, RemoteDataState} from 'src/types'
 
 interface Props {
@@ -42,18 +43,25 @@ class TagValueListItem extends PureComponent<Props, State> {
         </div>
         {this.state.isOpen && (
           <>
-            <TagList
-              db={db}
-              service={service}
-              tags={tags}
-              filter={this.filter}
-            />
+            {this.isLoading && <LoaderSkeleton />}
+            {!this.isLoading && (
+              <TagList
+                db={db}
+                service={service}
+                tags={tags}
+                filter={this.filter}
+              />
+            )}
           </>
         )}
       </div>
     )
   }
 
+  private get isLoading(): boolean {
+    return this.state.loading === RemoteDataState.Loading
+  }
+
   private get filter(): SchemaFilter[] {
     const {filter, tag, value} = this.props
 

ui/src/style/components/time-machine/ifql-explorer.scss

@@ -81,7 +81,7 @@ $ifql-tree-line: 2px;
     transform: translate(-50%, -50%);
   }
 
-  &:hover {
+  &:not(.skeleton):hover {
     color: $g17-whisper;
     cursor: pointer;
     background-color: $g4-onyx;
@@ -126,6 +126,24 @@ $ifql-tree-line: 2px;
   }
 }
 
+@keyframes skeleton-animation {
+  0% {
+    background-position: 100% 50%
+  }
+
+  100% {
+    background-position: 0% 50%
+  }
+}
+
+.ifql-schema-item-skeleton {
+  background: linear-gradient(70deg, $g4-onyx 0%, $g5-pepper 50%, $g4-onyx 100%);
+  border-radius: 4px;
+  height: 60%;
+  background-size: 400% 400%;
+  animation: skeleton-animation 1s ease infinite;
+}
+
 /* Tree Node Lines */
 .ifql-tree-node:before,
 .ifql-tree-node:after {
@@ -189,4 +207,9 @@ $ifql-tree-line: 2px;
   margin-right: $ifql-tree-indent / 2;
   margin-top: 1px;
   margin-bottom: 5px;
-}
+
+  input {
+    height: 25px;
+    font-size: 12px;
+  }
+}