Добавил лоадер

popup/src/components/mocks/script.ts

@@ -19,6 +19,7 @@ export default class Mocks extends Vue {
   @Prop()
   mode!: Mode
 
+  showLoader = false
   registers = new Registers()
   register2Id: Record<string, string> = {}
 
@@ -32,7 +33,11 @@ export default class Mocks extends Vue {
   }
 
   refreshMocks () {
-    this.mode === Mode.UPDATE && httpClient.mockConfigurations({ personalCode: this.personalCode })
+    if (this.mode !== Mode.UPDATE) {
+      return
+    }
+    this.showLoader = true
+    httpClient.mockConfigurations({ personalCode: this.personalCode })
       .then((data: any) => {
         const existServiceKeys = []
         for (const mockConfiguration of data.data) {
@@ -52,6 +57,9 @@ export default class Mocks extends Vue {
           delete this.register2Id[serviceCode]
         }
       })
+      .then(() => {
+        this.showLoader = false
+      })
   }
 
   async onServiceChanged (serviceKey: string) {
@@ -66,6 +74,7 @@ export default class Mocks extends Vue {
       return
     }
 
+    this.showLoader = true
     httpClient.changeMockValueConfiguration({
       id: this.register2Id[serviceKey],
       // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@@ -76,6 +85,9 @@ export default class Mocks extends Vue {
         console.log('updateMock')
         console.log(data)
       })
+      .then(() => {
+        this.showLoader = false
+      })
   }
 
   saveMocks () {
@@ -93,11 +105,15 @@ export default class Mocks extends Vue {
       mockConfiguration.active = 'true'
       mockConfigurations.push(mockConfiguration)
     }
+    this.showLoader = true
     httpClient.addMockConfigurations({ items: mockConfigurations })
       .then((data: any) => {
         console.log('saveMocks')
         console.log(data)
       })
+      .then(() => {
+        this.showLoader = false
+      })
   }
 
   saveMock (personalCode: string, serviceCode: string, value: number): Promise<any> {
@@ -108,10 +124,14 @@ export default class Mocks extends Vue {
     mockConfiguration.value = value
     mockConfiguration.active = 'true'
     mockConfigurations.push(mockConfiguration)
+    this.showLoader = true
     return httpClient.addMockConfigurations({ items: mockConfigurations })
       .then((data: any) => {
         console.log('saveMocks')
         console.log(data)
       })
+      .then(() => {
+        this.showLoader = false
+      })
   }
 }

popup/src/components/mocks/style.scss

@@ -1,3 +1,71 @@
 .option-select {
   width: 350px;
 }
+
+.lds-grid {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-grid div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #298df8;
+  animation: lds-grid 1.2s linear infinite;
+}
+.lds-grid div:nth-child(1) {
+  top: 8px;
+  left: 8px;
+  animation-delay: 0s;
+}
+.lds-grid div:nth-child(2) {
+  top: 8px;
+  left: 32px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(3) {
+  top: 8px;
+  left: 56px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(4) {
+  top: 32px;
+  left: 8px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(5) {
+  top: 32px;
+  left: 32px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(6) {
+  top: 32px;
+  left: 56px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(7) {
+  top: 56px;
+  left: 8px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(8) {
+  top: 56px;
+  left: 32px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(9) {
+  top: 56px;
+  left: 56px;
+  animation-delay: -1.6s;
+}
+@keyframes lds-grid {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

popup/src/components/mocks/template.html

@@ -1,44 +1,37 @@
 <div>
-    <div>
-        <div>XTEE MTA</div>
+    <div v-if="showLoader" class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+    <div v-if="!showLoader">
         <div>
-            <select class="option-select" v-model="registers.xtee_mta" @change="onServiceChanged('xtee_mta')">
-                <option value="-1">-</option>
-                <option value="0">Не замокано (делать запрос)</option>
-                <option value="1">Выписка на хороший доход</option>
-                <option value="2">Выписка на маленький доход</option>
-                <option value="3">Ошибка загрузки выписки (перезапрос)</option>
-                <option value="4">Ошибка загрузки выписки (нет данных)</option>
-                <option value="5">По персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)</option>
-                <option value="6">Выписка на хороший доход, последние два месяца доход 0</option>
-                <option value="7">Выписка на хороший доход, последний месяц доход 0</option>
-                <option value="8">Выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать</option>
-                <option value="9">Выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода</option>
-            </select>
+            <div>XTEE MTA</div>
+            <div>
+                <select class="option-select" v-model="registers.xtee_mta" @change="onServiceChanged('xtee_mta')">
+                    <option value="-1">-</option>
+                    <option value="0">Не замокано (делать запрос)</option>
+                    <option value="1">Выписка на хороший доход</option>
+                    <option value="2">Выписка на маленький доход</option>
+                    <option value="3">Ошибка загрузки выписки (перезапрос)</option>
+                    <option value="4">Ошибка загрузки выписки (нет данных)</option>
+                    <option value="5">По персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)</option>
+                    <option value="6">Выписка на хороший доход, последние два месяца доход 0</option>
+                    <option value="7">Выписка на хороший доход, последний месяц доход 0</option>
+                    <option value="8">Выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать</option>
+                    <option value="9">Выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода</option>
+                </select>
+            </div>
         </div>
-    </div>
-    <div>
-        <div>XTEE RIA</div>
         <div>
-            <select class="option-select" v-model="registers.ria" @change="onServiceChanged('ria')">
-                <option value="-1">-</option>
-                <option value="0">Не замокано (делать запрос)</option>
-                <option value="1">Успешный запрос</option>
-                <option value="2">Все запросы отклонены</option>
-                <option value="3">По персональному коду (3 - успешно, остальные - ошибка)</option>
-            </select>
+            <div>XTEE RIA</div>
+            <div>
+                <select class="option-select" v-model="registers.ria" @change="onServiceChanged('ria')">
+                    <option value="-1">-</option>
+                    <option value="0">Не замокано (делать запрос)</option>
+                    <option value="1">Успешный запрос</option>
+                    <option value="2">Все запросы отклонены</option>
+                    <option value="3">По персональному коду (3 - успешно, остальные - ошибка)</option>
+                </select>
+            </div>
         </div>
+        <br />
+        <button v-if="'add' === mode" @click="saveMocks">Сохранить моки</button>
     </div>
-
-<!--    <br /><br />-->
-<!--    <label>-->
-<!--        XTEE Pension-->
-<!--        <select class="option-select" v-model="registers.xtee_pension">-->
-<!--            <option value="">-</option>-->
-<!--            <option value="0">Не замокано (делать запрос)</option>-->
-<!--            <option value="2">Ошибка сервиса. (перезапросы)</option>-->
-<!--        </select>-->
-<!--    </label>-->
-    <br /><br />
-    <button v-if="'add' === mode" @click="saveMocks">Сохранить моки</button>
 </div>