1 files changed, 21 insertions, 17 deletions
diff --git a/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
index 45e7eaf9..6a3c3433 100644
--- a/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
+++ b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue
@@ -1,7 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
+    <table-date-picker
+      :class="{ disabledDiv: loading }"
+      :time-scale="timeScale"
+      @changePeriod="onChangePeriod"
+    />
     <power-temp :time-scale="timeScale"></power-temp>
     <volt-input :time-scale="timeScale"></volt-input>
     <volt-output :time-scale="timeScale"></volt-output>
@@ -16,7 +20,9 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
 import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 
 import PowerTemp from './PowerTemp';
@@ -42,6 +48,7 @@ export default {
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
+      loading,
       timeScale: 'hour',
     };
   },
@@ -55,6 +62,7 @@ export default {
       if (!resetButton) {
         return;
       }
+
       resetButton.dispatchEvent(new Event('click'));
     },
 
@@ -65,23 +73,19 @@ export default {
     },
     startProgress() {
       this.startLoader();
-      const psuTemp = new Promise((resolve) => {
-        this.$root.$on('psu-temp', () => resolve());
-      });
-      const psuVolt = new Promise((resolve) => {
-        this.$root.$on('psu-volt', () => resolve());
-      });
-      const psuPower = new Promise((resolve) => {
-        this.$root.$on('psu-power', () => resolve());
-      });
-      const psuCurrent = new Promise((resolve) => {
-        this.$root.$on('psu-current', () => resolve());
-      });
-
-      Promise.all([psuTemp, psuVolt, psuPower, psuCurrent]).finally(() =>
-        this.endLoader()
+      this.$root.$on('psu-temp', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-volt-input', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-volt-output', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-power-input', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-power-output', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-current-input', (loading) => this.onLoading(loading));
+      this.$root.$on('psu-current-output', (loading) =>
+        this.onLoading(loading)
       );
     },
+    onLoading(loading) {
+      loading ? this.startLoader() : this.endLoader();
+    },
   },
 };
 </script>