diff options
-rw-r--r-- | package-lock.json | 30 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | src/app.js | 15 | ||||
-rw-r--r-- | src/components/services/content/ServiceView.js | 6 | ||||
-rw-r--r-- | 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 @@ | |||
73 | "react-router": "3.2.6", | 73 | "react-router": "3.2.6", |
74 | "react-sortable-hoc": "2.0.0", | 74 | "react-sortable-hoc": "2.0.0", |
75 | "react-tooltip": "4.2.21", | 75 | "react-tooltip": "4.2.21", |
76 | "react-topbar-progress-indicator": "4.1.1", | ||
76 | "route-parser": "0.0.5", | 77 | "route-parser": "0.0.5", |
77 | "semver": "7.3.7", | 78 | "semver": "7.3.7", |
78 | "sqlite3": "5.0.8", | 79 | "sqlite3": "5.0.8", |
@@ -22604,6 +22605,17 @@ | |||
22604 | "uuid": "dist/bin/uuid" | 22605 | "uuid": "dist/bin/uuid" |
22605 | } | 22606 | } |
22606 | }, | 22607 | }, |
22608 | "node_modules/react-topbar-progress-indicator": { | ||
22609 | "version": "4.1.1", | ||
22610 | "resolved": "https://registry.npmjs.org/react-topbar-progress-indicator/-/react-topbar-progress-indicator-4.1.1.tgz", | ||
22611 | "integrity": "sha512-Oy3ENNKfymt16zoz5SYy/WOepMurB0oeZEyvuHm8JZ3jrTCe1oAUD7fG6HhYt5sg8Wcg5gdkzSWItaFF6c6VhA==", | ||
22612 | "dependencies": { | ||
22613 | "topbar": "^0.1.3" | ||
22614 | }, | ||
22615 | "peerDependencies": { | ||
22616 | "react": ">=16.8.0" | ||
22617 | } | ||
22618 | }, | ||
22607 | "node_modules/react-transition-group": { | 22619 | "node_modules/react-transition-group": { |
22608 | "version": "1.2.1", | 22620 | "version": "1.2.1", |
22609 | "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", | 22621 | "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", |
@@ -26021,6 +26033,11 @@ | |||
26021 | "node": ">=0.6" | 26033 | "node": ">=0.6" |
26022 | } | 26034 | } |
26023 | }, | 26035 | }, |
26036 | "node_modules/topbar": { | ||
26037 | "version": "0.1.4", | ||
26038 | "resolved": "https://registry.npmjs.org/topbar/-/topbar-0.1.4.tgz", | ||
26039 | "integrity": "sha512-P3n4WnN4GFd2mQXDo30rQmsAGe4V1bVkggtTreSbNyL50Fyc+eVkW5oatSLeGQmJoan2TLIgoXUZypN+6nw4MQ==" | ||
26040 | }, | ||
26024 | "node_modules/tough-cookie": { | 26041 | "node_modules/tough-cookie": { |
26025 | "version": "2.5.0", | 26042 | "version": "2.5.0", |
26026 | "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", | 26043 | "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", |
@@ -45957,6 +45974,14 @@ | |||
45957 | } | 45974 | } |
45958 | } | 45975 | } |
45959 | }, | 45976 | }, |
45977 | "react-topbar-progress-indicator": { | ||
45978 | "version": "4.1.1", | ||
45979 | "resolved": "https://registry.npmjs.org/react-topbar-progress-indicator/-/react-topbar-progress-indicator-4.1.1.tgz", | ||
45980 | "integrity": "sha512-Oy3ENNKfymt16zoz5SYy/WOepMurB0oeZEyvuHm8JZ3jrTCe1oAUD7fG6HhYt5sg8Wcg5gdkzSWItaFF6c6VhA==", | ||
45981 | "requires": { | ||
45982 | "topbar": "^0.1.3" | ||
45983 | } | ||
45984 | }, | ||
45960 | "react-transition-group": { | 45985 | "react-transition-group": { |
45961 | "version": "1.2.1", | 45986 | "version": "1.2.1", |
45962 | "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", | 45987 | "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", |
@@ -48692,6 +48717,11 @@ | |||
48692 | "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", | 48717 | "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", |
48693 | "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" | 48718 | "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" |
48694 | }, | 48719 | }, |
48720 | "topbar": { | ||
48721 | "version": "0.1.4", | ||
48722 | "resolved": "https://registry.npmjs.org/topbar/-/topbar-0.1.4.tgz", | ||
48723 | "integrity": "sha512-P3n4WnN4GFd2mQXDo30rQmsAGe4V1bVkggtTreSbNyL50Fyc+eVkW5oatSLeGQmJoan2TLIgoXUZypN+6nw4MQ==" | ||
48724 | }, | ||
48695 | "tough-cookie": { | 48725 | "tough-cookie": { |
48696 | "version": "2.5.0", | 48726 | "version": "2.5.0", |
48697 | "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", | 48727 | "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 @@ | |||
108 | "react-router": "3.2.6", | 108 | "react-router": "3.2.6", |
109 | "react-sortable-hoc": "2.0.0", | 109 | "react-sortable-hoc": "2.0.0", |
110 | "react-tooltip": "4.2.21", | 110 | "react-tooltip": "4.2.21", |
111 | "react-topbar-progress-indicator": "4.1.1", | ||
111 | "route-parser": "0.0.5", | 112 | "route-parser": "0.0.5", |
112 | "semver": "7.3.7", | 113 | "semver": "7.3.7", |
113 | "sqlite3": "5.0.8", | 114 | "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'; | |||
4 | import { Provider } from 'mobx-react'; | 4 | import { Provider } from 'mobx-react'; |
5 | import { syncHistoryWithStore, RouterStore } from 'mobx-react-router'; | 5 | import { syncHistoryWithStore, RouterStore } from 'mobx-react-router'; |
6 | import { hashHistory } from 'react-router'; | 6 | import { hashHistory } from 'react-router'; |
7 | import TopBarProgress from 'react-topbar-progress-indicator'; | ||
7 | 8 | ||
8 | import ServerApi from './api/server/ServerApi'; | 9 | import ServerApi from './api/server/ServerApi'; |
9 | import LocalApi from './api/server/LocalApi'; | 10 | import LocalApi from './api/server/LocalApi'; |
@@ -53,8 +54,8 @@ window.addEventListener('load', () => { | |||
53 | // TODO: send this request to the recipe.js | 54 | // TODO: send this request to the recipe.js |
54 | window.addEventListener('mouseup', e => { | 55 | window.addEventListener('mouseup', e => { |
55 | if (e.button === 3 || e.button === 4) { | 56 | if (e.button === 3 || e.button === 4) { |
56 | e.preventDefault() | 57 | e.preventDefault() |
57 | e.stopPropagation() | 58 | e.stopPropagation() |
58 | } | 59 | } |
59 | }); | 60 | }); |
60 | 61 | ||
@@ -63,3 +64,13 @@ window.addEventListener('dragover', event => event.preventDefault()); | |||
63 | window.addEventListener('drop', event => event.preventDefault()); | 64 | window.addEventListener('drop', event => event.preventDefault()); |
64 | window.addEventListener('dragover', event => event.stopPropagation()); | 65 | window.addEventListener('dragover', event => event.stopPropagation()); |
65 | window.addEventListener('drop', event => event.stopPropagation()); | 66 | window.addEventListener('drop', event => event.stopPropagation()); |
67 | |||
68 | TopBarProgress.config({ | ||
69 | barThickness: 4, | ||
70 | barColors: { | ||
71 | '0': '#f00', | ||
72 | '0.5': '#0f0', | ||
73 | '1.0': '#00f', | ||
74 | }, | ||
75 | shadowBlur: 5 | ||
76 | }); | ||
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 @@ | |||
1 | /* eslint-disable react/jsx-no-useless-fragment */ | 1 | /* eslint-disable react/jsx-no-useless-fragment */ |
2 | import { Component, Fragment } from 'react'; | 2 | import { Component } from 'react'; |
3 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
4 | import { autorun } from 'mobx'; | 4 | import { autorun } from 'mobx'; |
5 | import { observer, inject } from 'mobx-react'; | 5 | import { observer, inject } from 'mobx-react'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | import TopBarProgress from 'react-topbar-progress-indicator'; | ||
7 | 8 | ||
8 | import ServiceModel from '../../../models/Service'; | 9 | import ServiceModel from '../../../models/Service'; |
9 | import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; | 10 | import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; |
@@ -113,6 +114,9 @@ class ServiceView extends Component { | |||
113 | !service.isServiceAccessRestricted && ( | 114 | !service.isServiceAccessRestricted && ( |
114 | <WebviewLoader loaded={false} name={service.name} /> | 115 | <WebviewLoader loaded={false} name={service.name} /> |
115 | )} | 116 | )} |
117 | {service.isLoadingPage && !service.isFirstLoad && ( | ||
118 | <TopBarProgress /> | ||
119 | )} | ||
116 | {service.isError && ( | 120 | {service.isError && ( |
117 | <WebviewErrorHandler | 121 | <WebviewErrorHandler |
118 | name={service.recipe.name} | 122 | name={service.recipe.name} |
diff --git a/src/models/Service.js b/src/models/Service.js index e2b9ae7c6..ae13a063d 100644 --- a/src/models/Service.js +++ b/src/models/Service.js | |||
@@ -74,6 +74,8 @@ export default class Service { | |||
74 | 74 | ||
75 | @observable isLoading = true; | 75 | @observable isLoading = true; |
76 | 76 | ||
77 | @observable isLoadingPage = true; | ||
78 | |||
77 | @observable isError = false; | 79 | @observable isError = false; |
78 | 80 | ||
79 | @observable errorMessage = ''; | 81 | @observable errorMessage = ''; |
@@ -383,11 +385,20 @@ export default class Service { | |||
383 | 385 | ||
384 | this.hasCrashed = false; | 386 | this.hasCrashed = false; |
385 | this.isLoading = true; | 387 | this.isLoading = true; |
388 | this.isLoadingPage = true; | ||
386 | this.isError = false; | 389 | this.isError = false; |
387 | }); | 390 | }); |
388 | 391 | ||
392 | this.webview.addEventListener('did-stop-loading', event => { | ||
393 | debug('Did stop load', this.name, event); | ||
394 | |||
395 | this.isLoading = false; | ||
396 | this.isLoadingPage = false; | ||
397 | }); | ||
398 | |||
389 | const didLoad = () => { | 399 | const didLoad = () => { |
390 | this.isLoading = false; | 400 | this.isLoading = false; |
401 | this.isLoadingPage = false; | ||
391 | 402 | ||
392 | if (!this.isError) { | 403 | if (!this.isError) { |
393 | this.isFirstLoad = false; | 404 | this.isFirstLoad = false; |
@@ -407,6 +418,7 @@ export default class Service { | |||
407 | this.isError = true; | 418 | this.isError = true; |
408 | this.errorMessage = event.errorDescription; | 419 | this.errorMessage = event.errorDescription; |
409 | this.isLoading = false; | 420 | this.isLoading = false; |
421 | this.isLoadingPage = false; | ||
410 | } | 422 | } |
411 | }); | 423 | }); |
412 | 424 | ||