Improve Clockface Spinners (#11697)

* Introduce spinner container and techno spinner

Co-Authored-By: Delmer <[email protected]>

* Replace unstyled "Spinner" component with spinner container / techno spinner combo

Co-Authored-By: Delmer <[email protected]>

* Replace instances of Spinner with SpinnerContainer

* Replace instances of PageSpinner with SpinnerContainer

* Cleanup

* Updoot

* Improve changelog message

CHANGELOG.md

@@ -9,6 +9,7 @@
 ## UI Improvements
 1. [11683](https://github.com/influxdata/influxdb/pull/11683): Change the wording for the plugin config form button to Done
 1. [11689](https://github.com/influxdata/influxdb/pull/11689): Change the wording for the Collectors configure step button to Create and Verify
+1. [11697](https://github.com/influxdata/influxdb/pull/11697): Standardize page loading spinner styles
 
 ## v2.0.0-alpha.1 [2019-01-23]
 

ui/src/Setup.tsx

@@ -11,6 +11,7 @@ import {notify as notifyAction} from 'src/shared/actions/notifications'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 
 // Utils
 import {isOnboardingURL} from 'src/onboarding/utils'
@@ -63,18 +64,12 @@ export class Setup extends PureComponent<Props, State> {
   }
 
   public render() {
-    if (this.isLoading) {
-      return <div className="page-spinner" />
-    } else {
-      return this.props.children && React.cloneElement(this.props.children)
-    }
-  }
-
-  private get isLoading(): boolean {
     const {loading} = this.state
+
     return (
-      loading === RemoteDataState.Loading ||
-      loading === RemoteDataState.NotStarted
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </SpinnerContainer>
     )
   }
 }

ui/src/Signin.tsx

@@ -7,6 +7,7 @@ import {client} from 'src/utils/api'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -55,18 +56,12 @@ export class Signin extends PureComponent<Props, State> {
   }
 
   public render() {
-    if (this.isLoading) {
-      return <div className="page-spinner" />
-    }
-
-    return this.props.children && React.cloneElement(this.props.children)
-  }
-
-  private get isLoading(): boolean {
     const {loading} = this.state
+
     return (
-      loading === RemoteDataState.Loading ||
-      loading === RemoteDataState.NotStarted
+      <SpinnerContainer loading={loading} spinnerComponent={<TechnoSpinner />}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </SpinnerContainer>
     )
   }
 

ui/src/clockface/components/spinners/SpinnerContainer.scss

@@ -0,0 +1,9 @@
+.spinner-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+}

ui/src/clockface/components/spinners/SpinnerContainer.tsx

@@ -0,0 +1,43 @@
+// Libraries
+import React, {Component} from 'react'
+import classnames from 'classnames'
+
+// Types
+import {RemoteDataState} from 'src/types'
+
+// Styles
+import 'src/clockface/components/spinners/SpinnerContainer.scss'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {
+  children: JSX.Element[] | JSX.Element
+  className?: string
+  loading: RemoteDataState
+  spinnerComponent: JSX.Element
+}
+
+@ErrorHandling
+class SpinnerContainer extends Component<Props> {
+  public render() {
+    const {loading, children, spinnerComponent} = this.props
+
+    if (
+      loading === RemoteDataState.Loading ||
+      loading === RemoteDataState.NotStarted
+    ) {
+      return <div className={this.className}>{spinnerComponent}</div>
+    }
+
+    return children
+  }
+
+  private get className(): string {
+    const {className} = this.props
+
+    return classnames('spinner-container', {[`${className}`]: className})
+  }
+}
+
+export default SpinnerContainer

ui/src/clockface/components/spinners/TechnoSpinner.scss

@@ -0,0 +1,29 @@
+@import 'src/style/modules';
+
+.techno-spinner {
+  border-style: solid;
+  border-color: rgba($g5-pepper, 0.4);
+  border-left-color: $c-pool;
+  border-radius: 50%;
+  animation: technoSpinnerAnimation 0.8s infinite linear;
+}
+
+@keyframes technoSpinnerAnimation {
+  0% {
+    transform: rotate(0deg);
+    border-left-color: $c-pool;
+  }
+  25% {
+    border-left-color: $c-comet;
+  }
+  50% {
+    border-left-color: $c-pool;
+  }
+  75% {
+    border-left-color: $c-rainforest;
+  }
+  100% {
+    transform: rotate(360deg);
+    border-left-color: $c-pool;
+  }
+}

ui/src/clockface/components/spinners/TechnoSpinner.tsx

@@ -0,0 +1,59 @@
+// Libraries
+import React, {Component, CSSProperties} from 'react'
+
+// Types
+import {ComponentSize} from 'src/clockface/types'
+
+// Styles
+import 'src/clockface/components/spinners/TechnoSpinner.scss'
+
+interface Props {
+  diameterPixels?: number
+  strokeWidth?: ComponentSize
+}
+
+class TechnoSpinner extends Component<Props> {
+  public static defaultProps: Props = {
+    diameterPixels: 100,
+    strokeWidth: ComponentSize.Small,
+  }
+
+  public render() {
+    return <div className="techno-spinner" style={this.style} />
+  }
+
+  private get style(): CSSProperties {
+    const {diameterPixels} = this.props
+
+    const borderWidth = `${this.strokeWidth}px`
+    const width = `${diameterPixels}px`
+    const height = `${diameterPixels}px`
+
+    return {width, height, borderWidth}
+  }
+
+  private get strokeWidth(): number {
+    const {strokeWidth} = this.props
+
+    let width
+
+    switch (strokeWidth) {
+      case ComponentSize.ExtraSmall:
+        width = 1
+        break
+      case ComponentSize.Small:
+        width = 2
+        break
+      case ComponentSize.Medium:
+        width = 4
+        break
+      case ComponentSize.Large:
+      default:
+        width = 8
+    }
+
+    return width
+  }
+}
+
+export default TechnoSpinner

ui/src/clockface/index.ts

@@ -23,7 +23,6 @@ import WizardProgressHeader from './components/wizard/WizardProgressHeader'
 import ProgressBar from './components/wizard/ProgressBar'
 import ComponentSpacer from './components/component_spacer/ComponentSpacer'
 import EmptyState from './components/empty_state/EmptyState'
-import Spinner from './components/spinners/Spinner'
 import SparkleSpinner from './components/spinners/SparkleSpinner'
 import IndexList from './components/index_views/IndexList'
 import Context from './components/context_menu/Context'
@@ -35,6 +34,8 @@ import GridSizer from 'src/clockface/components/grid_sizer/GridSizer'
 import Select from 'src/clockface/components/Select'
 import Grid from 'src/clockface/components/grid_layout/Grid'
 import QuestionMarkTooltip from 'src/clockface/components/tooltips/QuestionMarkTooltip'
+import SpinnerContainer from 'src/clockface/components/spinners/SpinnerContainer'
+import TechnoSpinner from 'src/clockface/components/spinners/TechnoSpinner'
 
 // Import Types
 import {
@@ -102,8 +103,9 @@ export {
   SlideToggle,
   SparkleSpinner,
   Sort,
-  Spinner,
+  SpinnerContainer,
   Stack,
+  TechnoSpinner,
   WizardFullScreen,
   WizardProgressHeader,
   WizardOverlay,

ui/src/configuration/components/ConfigurationPage.tsx

@@ -5,7 +5,7 @@ import {withRouter, WithRouterProps} from 'react-router'
 // Components
 import {Page} from 'src/pageLayout'
 import GetLabels from 'src/configuration/components/GetLabels'
-import {Spinner} from 'src/clockface'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import TabbedPage from 'src/shared/components/tabbed_page/TabbedPage'
 import Labels from 'src/configuration/components/Labels'
@@ -50,9 +50,12 @@ class ConfigurationPage extends Component<Props> {
               >
                 <GetLabels>
                   {(labels, loading) => (
-                    <Spinner loading={loading}>
+                    <SpinnerContainer
+                      loading={loading}
+                      spinnerComponent={<TechnoSpinner />}
+                    >
                       <Labels labels={labels} />
-                    </Spinner>
+                    </SpinnerContainer>
                   )}
                 </GetLabels>
               </TabbedPageSection>

ui/src/dataLoaders/components/verifyStep/CreateOrUpdateConfig.tsx

@@ -4,7 +4,7 @@ import {connect} from 'react-redux'
 import _ from 'lodash'
 
 // Components
-import {Spinner} from 'src/clockface'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Actions
@@ -69,7 +69,12 @@ export class CreateOrUpdateConfig extends PureComponent<Props, State> {
 
   public render() {
     return (
-      <Spinner loading={this.state.loading}>{this.props.children()}</Spinner>
+      <SpinnerContainer
+        loading={this.state.loading}
+        spinnerComponent={<TechnoSpinner />}
+      >
+        {this.props.children()}
+      </SpinnerContainer>
     )
   }
 }

ui/src/dataLoaders/components/verifyStep/FetchAuthToken.tsx

@@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'
 import _ from 'lodash'
 
 // Components
-import {Spinner} from 'src/clockface'
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Apis
@@ -44,9 +44,12 @@ class FetchAuthToken extends PureComponent<Props, State> {
 
   public render() {
     return (
-      <Spinner loading={this.state.loading}>
+      <SpinnerContainer
+        loading={this.state.loading}
+        spinnerComponent={<TechnoSpinner />}
+      >
         {this.props.children(this.state.authToken)}
-      </Spinner>
+      </SpinnerContainer>
     )
   }
 }

ui/src/me/components/Resources.tsx

@@ -8,7 +8,7 @@ import LogoutButton from 'src/me/components/LogoutButton'
 import OrgsList from 'src/me/components/OrgsList'
 import DashboardsList from 'src/me/components/DashboardsList'
 import ResourceFetcher from 'src/shared/components/resource_fetcher'
-import {Panel, Spinner} from 'src/clockface'
+import {Panel, SpinnerContainer, TechnoSpinner} from 'src/clockface'
 
 // Constants
 import {VERSION, GIT_SHA} from 'src/shared/constants'
@@ -51,9 +51,12 @@ class ResourceLists extends PureComponent<Props> {
           <Panel.Body>
             <ResourceFetcher<Organization[]> fetcher={getOrganizations}>
               {(orgs, loading) => (
-                <Spinner loading={loading}>
+                <SpinnerContainer
+                  loading={loading}
+                  spinnerComponent={<TechnoSpinner diameterPixels={50} />}
+                >
                   <OrgsList orgs={orgs} />
-                </Spinner>
+                </SpinnerContainer>
               )}
             </ResourceFetcher>
           </Panel.Body>
@@ -63,9 +66,12 @@ class ResourceLists extends PureComponent<Props> {
           <Panel.Body>
             <ResourceFetcher<Dashboard[]> fetcher={getDashboards}>
               {(dashboards, loading) => (
-                <Spinner loading={loading}>
+                <SpinnerContainer
+                  loading={loading}
+                  spinnerComponent={<TechnoSpinner diameterPixels={50} />}
+                >
                   <DashboardsList dashboards={dashboards} />
-                </Spinner>
+                </SpinnerContainer>
               )}
             </ResourceFetcher>
           </Panel.Body>