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); }