Attach nprogress when is loading widget page.

app/renderer/pages/widget/components/WebWidget/WebWidget.scss

@@ -13,3 +13,10 @@
 .WebWidget__webview {
   flex: 1;
 }
+
+#nprogress {
+  .bar {
+    opacity: 0.4;
+    height: 100%;
+  }
+}

app/renderer/pages/widget/components/WebWidget/index.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import * as NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
 import url from 'url';
 import * as PATH from 'constants/path';
 import i18n from 'constants/i18n';
@@ -53,14 +55,21 @@ class WebWidget extends React.Component {
 
   componentDidMount() {
     const webView = this.webViewRef.current;
+    NProgress.configure({
+      easing: 'ease',
+      speed: 800,
+      minimum: 0.2,
+      parent: '.AddressBar__address',
+      showSpinner: false,
+    });
     // add event when widget page loading
     webView.addEventListener('did-start-loading', () => {
+      NProgress.remove();
+      NProgress.start();
       this.setState({ isLoading: true });
     });
-    webView.addEventListener('did-finish-load', () => {
-      this.setState({ isLoading: false });
-    });
     webView.addEventListener('did-stop-loading', () => {
+      NProgress.done();
       this.setState({ isLoading: false });
     });
     webView.addEventListener('new-window', (e) => {
@@ -83,10 +92,6 @@ class WebWidget extends React.Component {
       widgetContextMenu(this.webViewRef.current);
     });
 
-    // webView.addEventListener('dom-ready', () => {
-    //   this.webViewRef.current.openDevTools();
-    // });
-
     window.addEventListener('mousemove', (e) => {
       this.mousePosition = {
         x: e.pageX,

package.json

@@ -83,6 +83,7 @@
     "mousetrap": "^1.6.2",
     "node-sass": "^4.9.0",
     "normalize.css": "^8.0.0",
+    "nprogress": "^0.2.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",

webpack.basic.config.js

@@ -29,7 +29,7 @@ module.exports = {
         ]
       },
       {
-        test: /\.scss$/,
+        test: /\.s?css$/,
         use: [
           'style-loader',
           'css-loader',

yarn.lock

@@ -5935,6 +5935,11 @@ npm-which@^3.0.1:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+
 nth-check@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"