diff options
author | 2022-06-17 22:53:25 +0530 | |
---|---|---|
committer | 2022-06-17 17:23:25 +0000 | |
commit | 9b052c5345054a0f1cc879f795fd71e97a79c83e (patch) | |
tree | 264e84a790c9af9e576a1725274ea480bb7f4580 /src | |
parent | Revert "Feature: Progress Indicator for page loading (#248)" (diff) | |
download | ferdium-app-9b052c5345054a0f1cc879f795fd71e97a79c83e.tar.gz ferdium-app-9b052c5345054a0f1cc879f795fd71e97a79c83e.tar.zst ferdium-app-9b052c5345054a0f1cc879f795fd71e97a79c83e.zip |
Add a less-obstrusive progress bar on top of the Ferdium window (#285)
Diffstat (limited to 'src')
-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 |
3 files changed, 30 insertions, 3 deletions
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 | ||