From f22bb8c3c422f07813bf2473532fbb71a8764050 Mon Sep 17 00:00:00 2001 From: Patrick Hulce Date: Sat, 9 Nov 2019 22:11:02 -0600 Subject: [PATCH] feat(server): loading spinner design improved slow network connection loading with fixed dimension images --- packages/server/src/ui/app.jsx | 9 +- .../server/src/ui/components/async-loader.jsx | 3 +- .../src/ui/components/lhr-viewer-button.css | 3 + .../src/ui/components/loading-spinner.css | 20 ++++ .../src/ui/components/loading-spinner.jsx | 96 +++++++++++++++++++ packages/server/src/ui/components/pill.css | 3 + .../src/ui/routes/build-view/build-view.jsx | 3 +- .../project-dashboard/getting-started.css | 1 + .../project-dashboard/project-graphs.jsx | 6 ++ .../ui/routes/project-list/project-list.css | 1 + 10 files changed, 138 insertions(+), 7 deletions(-) create mode 100644 packages/server/src/ui/components/loading-spinner.css create mode 100644 packages/server/src/ui/components/loading-spinner.jsx diff --git a/packages/server/src/ui/app.jsx b/packages/server/src/ui/app.jsx index 50343ce4a..c8df9b35a 100644 --- 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 = () =>

Loading route...

; +import {LoadingSpinner} from './components/loading-spinner.jsx'; export const App = () => { return ( @@ -21,7 +20,7 @@ export const App = () => { path="/app/projects" loading={() => ( - + )} getComponent={() => @@ -32,7 +31,7 @@ export const App = () => { path="/app/projects/:projectSlug" loading={() => ( - + )} getComponent={() => @@ -43,7 +42,7 @@ export const App = () => { path="/app/projects/:projectSlug/compare/:partialBuildId" loading={() => ( - + )} 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 index de725712d..eba753c62 100644 --- 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

Lighthouse Error

; } else if (loadingState === 'loading') { - return renderLoading ? renderLoading() :

Loading...

; + return renderLoading ? renderLoading() : ; } return null; diff --git a/packages/server/src/ui/components/lhr-viewer-button.css b/packages/server/src/ui/components/lhr-viewer-button.css index 8f7b5d3b9..17a8c3e60 100644 --- 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 new file mode 100644 index 000000000..8e09da7c8 --- /dev/null +++ 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 new file mode 100644 index 000000000..3a2b217cf --- /dev/null +++ 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 ( + + + + + + + ); +}; + +/** @param {{solo?: boolean}} props */ +export const LoadingSpinner = props => { + return ( +
+ +
+ ); +}; diff --git a/packages/server/src/ui/components/pill.css b/packages/server/src/ui/components/pill.css index 91fbead8f..f29df4074 100644 --- 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 index 31eea6a36..90aa29582 100644 --- 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={() => ( -

Loading...

+ )} 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 index 2eb535033..6c1fe7609 100644 --- 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 index 814b24dc6..1894c0edd 100644 --- 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 => { ( + + + + )} render={allStats => { const noDataToDisplay = No data to display; 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 index 248468009..c451c431d 100644 --- 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); }