From 9b052c5345054a0f1cc879f795fd71e97a79c83e Mon Sep 17 00:00:00 2001 From: Vijay Aravamudhan Date: Fri, 17 Jun 2022 22:53:25 +0530 Subject: Add a less-obstrusive progress bar on top of the Ferdium window (#285) --- package-lock.json | 30 ++++++++++++++++++++++++++ package.json | 1 + src/app.js | 15 +++++++++++-- src/components/services/content/ServiceView.js | 6 +++++- src/models/Service.js | 12 +++++++++++ 5 files changed, 61 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ce6f8a8fa..107e87266 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,6 +73,7 @@ "react-router": "3.2.6", "react-sortable-hoc": "2.0.0", "react-tooltip": "4.2.21", + "react-topbar-progress-indicator": "4.1.1", "route-parser": "0.0.5", "semver": "7.3.7", "sqlite3": "5.0.8", @@ -22604,6 +22605,17 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/react-topbar-progress-indicator": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-topbar-progress-indicator/-/react-topbar-progress-indicator-4.1.1.tgz", + "integrity": "sha512-Oy3ENNKfymt16zoz5SYy/WOepMurB0oeZEyvuHm8JZ3jrTCe1oAUD7fG6HhYt5sg8Wcg5gdkzSWItaFF6c6VhA==", + "dependencies": { + "topbar": "^0.1.3" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-transition-group": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", @@ -26021,6 +26033,11 @@ "node": ">=0.6" } }, + "node_modules/topbar": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/topbar/-/topbar-0.1.4.tgz", + "integrity": "sha512-P3n4WnN4GFd2mQXDo30rQmsAGe4V1bVkggtTreSbNyL50Fyc+eVkW5oatSLeGQmJoan2TLIgoXUZypN+6nw4MQ==" + }, "node_modules/tough-cookie": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", @@ -45957,6 +45974,14 @@ } } }, + "react-topbar-progress-indicator": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-topbar-progress-indicator/-/react-topbar-progress-indicator-4.1.1.tgz", + "integrity": "sha512-Oy3ENNKfymt16zoz5SYy/WOepMurB0oeZEyvuHm8JZ3jrTCe1oAUD7fG6HhYt5sg8Wcg5gdkzSWItaFF6c6VhA==", + "requires": { + "topbar": "^0.1.3" + } + }, "react-transition-group": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", @@ -48692,6 +48717,11 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" }, + "topbar": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/topbar/-/topbar-0.1.4.tgz", + "integrity": "sha512-P3n4WnN4GFd2mQXDo30rQmsAGe4V1bVkggtTreSbNyL50Fyc+eVkW5oatSLeGQmJoan2TLIgoXUZypN+6nw4MQ==" + }, "tough-cookie": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", diff --git a/package.json b/package.json index 84fedabc7..6c99d962d 100644 --- a/package.json +++ b/package.json @@ -108,6 +108,7 @@ "react-router": "3.2.6", "react-sortable-hoc": "2.0.0", "react-tooltip": "4.2.21", + "react-topbar-progress-indicator": "4.1.1", "route-parser": "0.0.5", "semver": "7.3.7", "sqlite3": "5.0.8", diff --git a/src/app.js b/src/app.js index c56cda241..aa140832c 100644 --- a/src/app.js +++ b/src/app.js @@ -4,6 +4,7 @@ import { render } from 'react-dom'; import { Provider } from 'mobx-react'; import { syncHistoryWithStore, RouterStore } from 'mobx-react-router'; import { hashHistory } from 'react-router'; +import TopBarProgress from 'react-topbar-progress-indicator'; import ServerApi from './api/server/ServerApi'; import LocalApi from './api/server/LocalApi'; @@ -53,8 +54,8 @@ window.addEventListener('load', () => { // TODO: send this request to the recipe.js window.addEventListener('mouseup', e => { if (e.button === 3 || e.button === 4) { - e.preventDefault() - e.stopPropagation() + e.preventDefault() + e.stopPropagation() } }); @@ -63,3 +64,13 @@ window.addEventListener('dragover', event => event.preventDefault()); window.addEventListener('drop', event => event.preventDefault()); window.addEventListener('dragover', event => event.stopPropagation()); window.addEventListener('drop', event => event.stopPropagation()); + +TopBarProgress.config({ + barThickness: 4, + barColors: { + '0': '#f00', + '0.5': '#0f0', + '1.0': '#00f', + }, + shadowBlur: 5 +}); diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js index 1effcb628..39f1176f3 100644 --- a/src/components/services/content/ServiceView.js +++ b/src/components/services/content/ServiceView.js @@ -1,9 +1,10 @@ /* eslint-disable react/jsx-no-useless-fragment */ -import { Component, Fragment } from 'react'; +import { Component } from 'react'; import PropTypes from 'prop-types'; import { autorun } from 'mobx'; import { observer, inject } from 'mobx-react'; import classnames from 'classnames'; +import TopBarProgress from 'react-topbar-progress-indicator'; import ServiceModel from '../../../models/Service'; import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; @@ -113,6 +114,9 @@ class ServiceView extends Component { !service.isServiceAccessRestricted && ( )} + {service.isLoadingPage && !service.isFirstLoad && ( + + )} {service.isError && ( { + debug('Did stop load', this.name, event); + + this.isLoading = false; + this.isLoadingPage = false; + }); + const didLoad = () => { this.isLoading = false; + this.isLoadingPage = false; if (!this.isError) { this.isFirstLoad = false; @@ -407,6 +418,7 @@ export default class Service { this.isError = true; this.errorMessage = event.errorDescription; this.isLoading = false; + this.isLoadingPage = false; } }); -- cgit v1.2.3-70-g09d2