Подключил отображение компонента загрузки (todo: переделать)

client/api/reader.js

@@ -11,6 +11,8 @@ const workerApi = axios.create({
 
 class Reader {
     async loadBook(url, callback) {
+        const refreshPause = 100;
+
         let response = await api.post('/load-book', {type: 'url', url});
 
         const workerId = response.data.workerId;
@@ -29,10 +31,10 @@ class Reader {
                 throw new Error(response.data.error);
             }
             if (i > 0)
-                await sleep(500);
+                await sleep(refreshPause);
 
             i++;
-            if (i > 60) {
+            if (i > 30*1000/refreshPause) {
                 throw new Error('Слишком долгое время ожидания');
             }
             response = await workerApi.post('/get-state', {workerId});

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="main">
+    <div ref="main" class="main">
         <div class="part">
             <span class="greeting bold-font">{{ title }}</span>
             <span class="greeting">Добро пожаловать!</span>
@@ -59,14 +59,16 @@ class LoaderPage extends Vue {
 
     async submitUrl() {
         if (this.bookUrl) {
+            const loading = this.$loading({ target: this.$refs.main, customClass: 'loading'});
             try {
                 const book = await readerApi.loadBook(this.bookUrl, (state) => {
-                    this.loadState = state;
+                    const progress = state.progress || 0;
+                    loading.text = `${state.state} ${progress}%`;
                 });
-
-                this.loadState = book;
+                loading.close();
             } catch (e) {
                 this.loadState = e.message;
+                loading.close();
             }
         }
     }
@@ -89,6 +91,14 @@ class LoaderPage extends Vue {
 }
 //-----------------------------------------------------------------------------
 </script>
+<style>
+.loading {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+.el-loading-text {
+    color: #ffffff !important;
+}
+</style>
 <style scoped>
 .main {
     flex: 1;

client/element.js

@@ -50,14 +50,16 @@ import './theme/main.css';
 import ElInput from 'element-ui/lib/input';
 import './theme/input.css';
 
-const ElNotification = () => import('element-ui/lib/notification');
+import Notification from 'element-ui/lib/notification';
 import './theme/notification.css';
 
+import Loading from 'element-ui/lib/loading';
+import './theme/loading.css';
+
 const components = {
     ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
-    ElInput,
-    ElNotification
+    ElInput
 };
 
 for (let [name, comp] of Object.entries(components)) {
@@ -66,7 +68,7 @@ for (let [name, comp] of Object.entries(components)) {
 
 //Vue.use(Loading.directive);
 
-//Vue.prototype.$loading = Loading.service;
+Vue.prototype.$loading = Loading.service;
 //Vue.prototype.$msgbox = MessageBox;
 //Vue.prototype.$alert = MessageBox.alert;
 //Vue.prototype.$confirm = MessageBox.confirm;