feat(server): loading spinner design

improved slow network connection loading with fixed dimension images
GoogleChrome · Nov 10, 2019 · f22bb8c · f22bb8c
1 parent 98092f7
commit f22bb8c
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 7 deletions.
diff --git a/packages/server/src/ui/app.jsx b/packages/server/src/ui/app.jsx
@@ -10,8 +10,7 @@ import LazyRoute from 'preact-async-route';
 import {Redirect} from './components/redirect.jsx';
 import './app.css';
 import {Page} from './layout/page.jsx';
-
-const Loader = () => <h1>Loading route...</h1>;
+import {LoadingSpinner} from './components/loading-spinner.jsx';
 
 export const App = () => {
   return (
@@ -21,7 +20,7 @@ export const App = () => {
           path="/app/projects"
           loading={() => (
             <Page>
-              <Loader />
+              <LoadingSpinner />
             </Page>
           )}
           getComponent={() =>
@@ -32,7 +31,7 @@ export const App = () => {
           path="/app/projects/:projectSlug"
           loading={() => (
             <Page>
-              <Loader />
+              <LoadingSpinner />
             </Page>
           )}
           getComponent={() =>
@@ -43,7 +42,7 @@ export const App = () => {
           path="/app/projects/:projectSlug/compare/:partialBuildId"
           loading={() => (
             <Page>
-              <Loader />
+              <LoadingSpinner />
             </Page>
           )}
           getComponent={() => import('./routes/build-view/build-view.jsx').then(m => m.BuildView)}

diff --git a/packages/server/src/ui/components/async-loader.jsx b/packages/server/src/ui/components/async-loader.jsx
@@ -6,6 +6,7 @@
 
 import {h} from 'preact';
 import {Redirect} from './redirect.jsx';
+import {LoadingSpinner} from './loading-spinner.jsx';
 
 /** @typedef {import('../hooks/use-api-data').LoadingState} LoadingState */
 
@@ -20,7 +21,7 @@ export const AsyncLoader = props => {
   } else if (loadingState === 'error') {
     return <h1>Lighthouse Error</h1>;
   } else if (loadingState === 'loading') {
-    return renderLoading ? renderLoading() : <h1>Loading...</h1>;
+    return renderLoading ? renderLoading() : <LoadingSpinner />;
   }
 
   return null;

diff --git a/packages/server/src/ui/components/lhr-viewer-button.css b/packages/server/src/ui/components/lhr-viewer-button.css
@@ -19,10 +19,13 @@
 
 .lhr-viewer-button img {
   height: 20px;
+  width: 20px;
   margin-right: calc(var(--base-spacing) / 2);
 }
 
 .lhr-viewer-button {
   color: var(--base-text-color);
   font-weight: var(--medium-font-weight);
+  overflow: hidden;
+  white-space: nowrap;
 }
diff --git a/packages/server/src/ui/components/loading-spinner.css b/packages/server/src/ui/components/loading-spinner.css
@@ -0,0 +1,20 @@
+/**
+ * @license Copyright 2019 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+.loading-spinner--container {
+  width: 100%;
+  min-height: 300px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-spinner svg {
+  width: 100px;
+  height: 100px;
+}
diff --git a/packages/server/src/ui/components/loading-spinner.jsx b/packages/server/src/ui/components/loading-spinner.jsx
@@ -0,0 +1,96 @@
+/**
+ * @license Copyright 2019 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {h, Fragment} from 'preact';
+import clsx from 'clsx';
+import './loading-spinner.css';
+
+const LoadingSpinner_ = () => {
+  return (
+    <svg viewBox="0 0 100 100">
+      <path>
+        <animate
+          attributeName="d"
+          dur="2000ms"
+          repeatCount="indefinite"
+          keyTimes="0;
+                   .0625;
+                   .3125;
+                   .395833333;
+                   .645833333;
+                   .833333333;
+                   1"
+          calcMode="spline"
+          keySplines="0,0,1,1;
+                     .42,0,1,1;
+                     0,0,.58,1;
+                     .42,0,.58,1;
+                     .42,0,.58,1;
+                     .42,0,.58,1"
+          values="M 0,0 C 50,0 50,0 100,0 100,50 100,50 100,100
+                 50,100 50,100 0,100 0,50 0,50 0,0 Z;
+
+                 M 0,0 C 50,0 50,0 100,0 100,50 100,50 100,100
+                 50,100 50,100 0,100 0,50 0,50 0,0 Z;
+
+                 M 50,0 C 75,50 75,50 100,100 50,100 50,100 0,100
+                 12.5,75 12.5,75 25,50 37.5,25 37.5,25 50,0 Z;
+
+                 M 50,0 C 75,50 75,50 100,100 50,100 50,100 0,100
+                 12.5,75 12.5,75 25,50 37.5,25 37.5,25 50,0 Z;
+
+                 M 100,50 C 100,77.6 77.6,100 50,100 22.4,100 0,77.6
+                 0,50 0,22.4 22.4,0 50,0 77.6,0 100,22.4 100,50 Z;
+
+                 M 100,50 C 100,77.6 77.6,100 50,100 22.4,100 0,77.6
+                 0,50 0,22.4 22.4,0 50,0 77.6,0 100,22.4 100,50 Z;
+
+                 M 100,100 C 50,100 50,100 0,100 0,50 0,50 0,0
+                 50,0 50,0 100,0 100,50 100,50 100,100 Z;"
+        />
+        <animate
+          attributeName="fill"
+          dur="2000ms"
+          repeatCount="indefinite"
+          keyTimes="0;
+                   .0625;
+                   .3125;
+                   .395833333;
+                   .645833333;
+                   .833333333;
+                   1"
+          calcMode="spline"
+          keySplines="0,0,1,1;
+                     .42,0,1,1;
+                     0,0,.58,1;
+                     .42,0,.58,1;
+                     .42,0,.58,1;
+                     .42,0,.58,1"
+          values="#FFA400;
+                 #FFA400;
+                 #FF4E42;
+                 #FF4E42;
+                 #0CCE6B;
+                 #0CCE6B;
+                 #FFA400;"
+        />
+      </path>
+    </svg>
+  );
+};
+
+/** @param {{solo?: boolean}} props */
+export const LoadingSpinner = props => {
+  return (
+    <div
+      className={clsx('loading-spinner', {
+        'loading-spinner--container': !props.solo,
+      })}
+    >
+      <LoadingSpinner_ />
+    </div>
+  );
+};
diff --git a/packages/server/src/ui/components/pill.css b/packages/server/src/ui/components/pill.css
@@ -60,6 +60,9 @@
 }
 
 .pill__avatar {
+  height: var(--pill-content-height);
+  width: var(--pill-content-height);
+
   border-radius: 100%;
   margin-left: -5px;
   margin-right: calc(var(--base-spacing) / 2);

diff --git a/packages/server/src/ui/routes/build-view/build-view.jsx b/packages/server/src/ui/routes/build-view/build-view.jsx
@@ -30,6 +30,7 @@ import {findAuditDiffs, getDiffSeverity} from '@lhci/utils/src/audit-diff-finder
 import {route, Link} from 'preact-router';
 import {BuildViewWarnings} from './build-view-warnings';
 import {DocumentTitle} from '../../components/document-title';
+import {LoadingSpinner} from '../../components/loading-spinner';
 
 /**
  * @param {LH.Result} lhr
@@ -349,7 +350,7 @@ export const BuildView = props => {
       )}
       renderLoading={() => (
         <Page>
-          <h1>Loading...</h1>
+          <LoadingSpinner />
         </Page>
       )}
       render={([project, build, ancestorBuild, runs, baseRuns]) => (

diff --git a/packages/server/src/ui/routes/project-dashboard/getting-started.css b/packages/server/src/ui/routes/project-dashboard/getting-started.css
@@ -25,6 +25,7 @@
 }
 
 .getting-started img {
+  height: 80px;
   width: 80px;
   margin-bottom: calc(var(--base-spacing) * 2);
 }
diff --git a/packages/server/src/ui/routes/project-dashboard/project-graphs.jsx b/packages/server/src/ui/routes/project-dashboard/project-graphs.jsx
@@ -15,6 +15,7 @@ import {Plot} from '../../components/plot.jsx';
 import './project-graphs.css';
 import {Dropdown} from '../../components/dropdown';
 import {route} from 'preact-router';
+import {LoadingSpinner} from '../../components/loading-spinner';
 
 const COLORS = ['#4587f4', '#f44587', '#87f445'];
 
@@ -61,6 +62,11 @@ const StatisticPlot = props => {
     <AsyncLoader
       loadingState={props.loadingState}
       asyncData={props.statistics}
+      renderLoading={() => (
+        <Paper className="dashboard-graph">
+          <LoadingSpinner />
+        </Paper>
+      )}
       render={allStats => {
         const noDataToDisplay = <Paper className="dashboard-graph">No data to display</Paper>;
         if (allStats.length === 0) {

diff --git a/packages/server/src/ui/routes/project-list/project-list.css b/packages/server/src/ui/routes/project-list/project-list.css
@@ -29,6 +29,7 @@
 }
 
 .project-list img {
+  height: 80px;
   width: 80px;
   margin-bottom: calc(var(--base-spacing) * 2);
 }