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

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,4 +1,6 @@
 <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>
             <div>XTEE MTA</div>
             <div>
@@ -29,16 +31,7 @@
                 </select>
             </div>
         </div>
-
+        <br />
-<!--    <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>
+</div>