From 5463c8aec08dfa07a01f95646e44a3b4bee070fe Mon Sep 17 00:00:00 2001
From: Vitalii Lysak <v.lysak@dunice.net>
Date: Fri, 26 Aug 2022 14:50:55 +0300
Subject: optimization for dynamic

---
 src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue       | 20 ++++++++----
 src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue    | 20 ++++++++----
 src/views/_sila/Fans/Dynamic/FansDynamicPage.vue   | 24 ++++++++++++--
 src/views/_sila/Power/Dynamic/CurrentInput.vue     | 13 +++++---
 src/views/_sila/Power/Dynamic/CurrentOutput.vue    | 13 +++++++-
 src/views/_sila/Power/Dynamic/PowerDynamicPage.vue | 38 ++++++++++++----------
 src/views/_sila/Power/Dynamic/PowerInput.vue       | 13 +++++---
 src/views/_sila/Power/Dynamic/PowerOutput.vue      | 12 ++++++-
 src/views/_sila/Power/Dynamic/PowerTemp.vue        | 14 ++++++--
 src/views/_sila/Power/Dynamic/VoltInput.vue        | 13 +++++---
 src/views/_sila/Power/Dynamic/VoltOutput.vue       | 14 +++++---
 src/views/_sila/Processors/Dynamic/CpuPower.vue    | 19 ++++++++---
 src/views/_sila/Processors/Dynamic/CpuTemp.vue     | 14 ++++++--
 .../Processors/Dynamic/ProcessorsDynamicPage.vue   | 24 ++++++++++++--
 14 files changed, 185 insertions(+), 66 deletions(-)

(limited to 'src/views')

diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue b/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
index c24bc8d7..b4c5dfdd 100644
--- a/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedCpu.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_FansCpu"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageFans.speed')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -153,6 +155,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -258,8 +261,8 @@ export default {
 
     allSensors() {
       return this.timeScale === 'hour'
-        ? this.$store.getters['fan/fansLastHour']
-        : this.$store.getters['fan/fans'];
+        ? this.$store.getters['fan/fansCpuLastHour']
+        : this.$store.getters['fan/fansCpu'];
     },
 
     preFiltered() {
@@ -287,14 +290,14 @@ export default {
 
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
 
-  created() {
-    this.loadData();
-  },
-
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -326,6 +329,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -334,11 +338,13 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('fan-cpu', true);
       this.startLoader();
-      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+      this.$store.dispatch('fan/getFansCpu', payload).finally(() => {
         this.$store.dispatch('fan/getLimits').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
+          this.$root.$emit('fan-cpu', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
index 2271ef5c..b86e1672 100644
--- a/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
+++ b/src/views/_sila/Fans/Dynamic/FanSpeedSystem.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_FansSystem"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageFans.speedSystem')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -153,6 +155,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -258,8 +261,8 @@ export default {
 
     allSensors() {
       return this.timeScale === 'hour'
-        ? this.$store.getters['fan/fansLastHour']
-        : this.$store.getters['fan/fans'];
+        ? this.$store.getters['fan/fansSystemLastHour']
+        : this.$store.getters['fan/fansSystem'];
     },
 
     preFiltered() {
@@ -287,14 +290,14 @@ export default {
 
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
 
-  created() {
-    this.loadData();
-  },
-
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -328,6 +331,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -336,11 +340,13 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('fan-system', true);
       this.startLoader();
-      this.$store.dispatch('fan/getFansDynamic', payload).finally(() => {
+      this.$store.dispatch('fan/getFansSystem', payload).finally(() => {
         this.$store.dispatch('fan/getLimits').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
+          this.$root.$emit('fan-system', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index 3b5b0030..eaf3777c 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.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"
+    />
     <fan-speed-cpu :time-scale="timeScale"></fan-speed-cpu>
     <fan-speed-system :time-scale="timeScale"></fan-speed-system>
   </b-container>
@@ -12,7 +16,9 @@ import PageTitle from '@/components/_sila/Global/PageTitle';
 import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 
 import FanSpeedCpu from './FanSpeedCpu';
@@ -23,10 +29,13 @@ export default {
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
+      loading,
       timeScale: 'hour',
     };
   },
-
+  created() {
+    this.startProgress();
+  },
   methods: {
     resetZoom() {
       const resetButton = document.querySelector('.highcharts-reset-zoom');
@@ -38,8 +47,17 @@ export default {
     },
     onChangePeriod(period) {
       this.timeScale = period;
+      this.startProgress();
       this.resetZoom();
     },
+    startProgress() {
+      this.startLoader();
+      this.$root.$on('fan-cpu', (loading) => this.onLoading(loading));
+      this.$root.$on('fan-system', (loading) => this.onLoading(loading));
+    },
+    onLoading(loading) {
+      loading ? this.startLoader() : this.endLoader();
+    },
   },
 };
 </script>
diff --git a/src/views/_sila/Power/Dynamic/CurrentInput.vue b/src/views/_sila/Power/Dynamic/CurrentInput.vue
index dace6a82..34e2c166 100644
--- a/src/views/_sila/Power/Dynamic/CurrentInput.vue
+++ b/src/views/_sila/Power/Dynamic/CurrentInput.vue
@@ -108,6 +108,7 @@ export default {
       warning: Infinity,
       shutdown: Infinity,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -162,26 +163,30 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
   methods: {
     onOpened(state) {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_current', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
+
+      this.$root.$emit('psu-current-input', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
-        this.$root.$emit('psu-current');
+        this.$root.$emit('psu-current-output', false);
         this.isBusy = false;
         this.endLoader();
       });
diff --git a/src/views/_sila/Power/Dynamic/CurrentOutput.vue b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
index d796b3e7..a51c1fe6 100644
--- a/src/views/_sila/Power/Dynamic/CurrentOutput.vue
+++ b/src/views/_sila/Power/Dynamic/CurrentOutput.vue
@@ -108,6 +108,7 @@ export default {
       warning: Infinity,
       shutdown: Infinity,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -162,6 +163,13 @@ export default {
     },
   },
   watch: {
+    timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
+      this.loadData();
+    },
     items() {
       this.items.length ? (this.isBusy = false) : (this.isBusy = true);
     },
@@ -171,15 +179,18 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_current', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
+
+      this.$root.$emit('psu-current-output', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
-        this.$root.$emit('psu-current');
+        this.$root.$emit('psu-current-output', false);
         this.isBusy = false;
         this.endLoader();
       });
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>
diff --git a/src/views/_sila/Power/Dynamic/PowerInput.vue b/src/views/_sila/Power/Dynamic/PowerInput.vue
index 676f236c..bfbf9953 100644
--- a/src/views/_sila/Power/Dynamic/PowerInput.vue
+++ b/src/views/_sila/Power/Dynamic/PowerInput.vue
@@ -107,6 +107,7 @@ export default {
       warning: Infinity,
       shutdown: Infinity,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -162,17 +163,19 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
   methods: {
     onOpened(state) {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -180,9 +183,11 @@ export default {
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
+
+      this.$root.$emit('psu-power-input', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
-        this.$root.$emit('psu-power');
+        this.$root.$emit('psu-power-input', false);
         this.isBusy = false;
         this.endLoader();
       });
diff --git a/src/views/_sila/Power/Dynamic/PowerOutput.vue b/src/views/_sila/Power/Dynamic/PowerOutput.vue
index 851606d1..842cdd59 100644
--- a/src/views/_sila/Power/Dynamic/PowerOutput.vue
+++ b/src/views/_sila/Power/Dynamic/PowerOutput.vue
@@ -107,6 +107,7 @@ export default {
       warning: Infinity,
       shutdown: Infinity,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -161,6 +162,13 @@ export default {
     },
   },
   watch: {
+    timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
+      this.loadData();
+    },
     items() {
       this.items.length ? (this.isBusy = false) : (this.isBusy = true);
     },
@@ -170,6 +178,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -178,9 +187,10 @@ export default {
         payload.lastHour = true;
       }
 
+      this.$root.$emit('psu-power-output', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
-        this.$root.$emit('psu-power');
+        this.$root.$emit('psu-power-output', false);
         this.isBusy = false;
         this.endLoader();
       });
diff --git a/src/views/_sila/Power/Dynamic/PowerTemp.vue b/src/views/_sila/Power/Dynamic/PowerTemp.vue
index 89799c5a..1a8a4b58 100644
--- a/src/views/_sila/Power/Dynamic/PowerTemp.vue
+++ b/src/views/_sila/Power/Dynamic/PowerTemp.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_psuTempp"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pagePowerSup.temperature')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -147,6 +149,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -244,12 +247,14 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
+
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -269,17 +274,20 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_temp', lastHour: false };
       if (this.timeScale === 'hour') {
         payload.lastHour = true;
       }
+      this.$root.$emit('psu-temp', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$store.dispatch('powerSupply/getLimitsTemp').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
+          this.$root.$emit('psu-temp', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Power/Dynamic/VoltInput.vue b/src/views/_sila/Power/Dynamic/VoltInput.vue
index 6baf5e47..7012f11b 100644
--- a/src/views/_sila/Power/Dynamic/VoltInput.vue
+++ b/src/views/_sila/Power/Dynamic/VoltInput.vue
@@ -1,6 +1,7 @@
 <template>
   <collapse
     id="collapse_InputVolt"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pagePowerSup.InputVolt')"
     @opened="onOpened"
   >
@@ -147,6 +148,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -246,12 +248,13 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -271,6 +274,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_voltage', lastHour: false };
@@ -278,12 +282,13 @@ export default {
         payload.lastHour = true;
       }
 
+      this.$root.$emit('psu-volt-input', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$store.dispatch('powerSupply/getLimitsVol').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
-          this.$root.$emit('psu-volt');
+          this.$root.$emit('psu-volt-input', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Power/Dynamic/VoltOutput.vue b/src/views/_sila/Power/Dynamic/VoltOutput.vue
index c31e89a8..c5de746f 100644
--- a/src/views/_sila/Power/Dynamic/VoltOutput.vue
+++ b/src/views/_sila/Power/Dynamic/VoltOutput.vue
@@ -1,6 +1,7 @@
 <template>
   <collapse
     id="collapse_OutputVolt"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pagePowerSup.OutputVolt')"
     @opened="onOpened"
   >
@@ -147,6 +148,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -260,14 +262,14 @@ export default {
     },
 
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
 
-  /*created() {
-    this.loadData();
-  },*/
-
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -288,6 +290,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
     loadData() {
       let payload = { metricsName: 'psu_voltage', lastHour: false };
@@ -295,12 +298,13 @@ export default {
         payload.lastHour = true;
       }
 
+      this.$root.$emit('psu-volt-input', true);
       this.startLoader();
       this.$store.dispatch('powerSupply/getPsu', payload).finally(() => {
         this.$store.dispatch('powerSupply/getLimitsVol').finally(() => {
           this.warning = this.warningLimit;
           this.critical = this.criticalLimit;
-          this.$root.$emit('psu-volt');
+          this.$root.$emit('psu-volt-output', false);
           this.isBusy = false;
           this.endLoader();
         });
diff --git a/src/views/_sila/Processors/Dynamic/CpuPower.vue b/src/views/_sila/Processors/Dynamic/CpuPower.vue
index fe359456..693c161d 100644
--- a/src/views/_sila/Processors/Dynamic/CpuPower.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuPower.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_power"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageProcessors.power')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -81,7 +83,9 @@ import Chart from '@/components/_sila/Global/Chart';
 import PageSection from '@/components/Global/PageSection';
 
 import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
-import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import LoadingBarMixin, {
+  loading,
+} from '@/components/_sila/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
 import Collapse from '@/components/_sila/Global/Collapse';
 
@@ -98,9 +102,11 @@ export default {
   },
   data() {
     return {
+      loading,
       warning: 66,
       shutdown: 88,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -140,17 +146,20 @@ export default {
   },
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
+
   methods: {
     onOpened(state) {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -159,10 +168,12 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('cpu-power', true);
       this.startLoader();
       this.$store
         .dispatch('processors/getCpuPowerDynamic', payload)
         .finally(() => {
+          this.$root.$emit('cpu-power', false);
           this.endLoader();
           this.isBusy = false;
         });
diff --git a/src/views/_sila/Processors/Dynamic/CpuTemp.vue b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
index f4e9a49f..f33b328a 100644
--- a/src/views/_sila/Processors/Dynamic/CpuTemp.vue
+++ b/src/views/_sila/Processors/Dynamic/CpuTemp.vue
@@ -1,7 +1,9 @@
 <template>
   <collapse
     id="collapse_temp"
+    :class="{ disabledDiv: loading && opened }"
     :title="$t('pageProcessors.temperature')"
+    :opened="true"
     @opened="onOpened"
   >
     <template #image>
@@ -147,6 +149,7 @@ export default {
       warning: null,
       critical: null,
       isBusy: true,
+      opened: false,
       fields: [
         {
           key: 'name',
@@ -251,12 +254,14 @@ export default {
 
   watch: {
     timeScale() {
+      if (!this.opened) {
+        return;
+      }
+
       this.loadData();
     },
   },
-  created() {
-    this.loadData();
-  },
+
   methods: {
     saveLimit() {
       this.$v.$touch();
@@ -276,6 +281,7 @@ export default {
       if (state) {
         this.loadData();
       }
+      this.opened = state;
     },
 
     loadData() {
@@ -284,6 +290,7 @@ export default {
         payload = { lastHour: true };
       }
 
+      this.$root.$emit('cpu-temp', true);
       this.startLoader();
       this.$store
         .dispatch('processors/getCpuTempDynamic', payload)
@@ -291,6 +298,7 @@ export default {
           this.$store.dispatch('processors/getLimitsTemp').finally(() => {
             this.warning = this.warningLimit;
             this.critical = this.criticalLimit;
+            this.$root.$emit('cpu-temp', false);
             this.endLoader();
             this.isBusy = false;
           });
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index ff9feb2e..e92ee8fb 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.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"
+    />
     <cpu-temp :time-scale="timeScale"></cpu-temp>
     <cpu-power :time-scale="timeScale"></cpu-power>
   </b-container>
@@ -11,7 +15,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 CpuPower from './CpuPower';
@@ -27,10 +33,13 @@ export default {
   mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
   data() {
     return {
+      loading,
       timeScale: 'hour',
     };
   },
-
+  created() {
+    this.startProgress();
+  },
   methods: {
     resetZoom() {
       const resetButton = document.querySelector('.highcharts-reset-zoom');
@@ -42,8 +51,17 @@ export default {
     },
     onChangePeriod(period) {
       this.timeScale = period;
+      this.startProgress();
       this.resetZoom();
     },
+    startProgress() {
+      this.startLoader();
+      this.$root.$on('cpu-temp', (loading) => this.onLoading(loading));
+      this.$root.$on('cpu-power', (loading) => this.onLoading(loading));
+    },
+    onLoading(loading) {
+      loading ? this.startLoader() : this.endLoader();
+    },
   },
 };
 </script>
-- 
cgit v1.2.3