Add page Loader

- Add page Loader to Server LED page
- Tested responsive layout on supported viewport sizes

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I0ca198c8ee1354f66a677746c29c8cb45f361eab

2 files changed, 15 insertions, 5 deletions

diff --git a/src/store/modules/Control/ServerLedStore.js b/src/store/modules/Control/ServerLedStore.js
index c690d7cb..54faf591 100644
--- a/src/store/modules/Control/ServerLedStore.js
+++ b/src/store/modules/Control/ServerLedStore.js
@@ -14,16 +14,16 @@ const ServerLedStore = {
     }
   },
   actions: {
-    getIndicatorValue: ({ commit }) => {
-      api
+    async getIndicatorValue({ commit }) {
+      await api
         .get('/redfish/v1/Systems/system')
         .then(response => {
           commit('setIndicatorValue', response.data.IndicatorLED);
         })
         .catch(error => console.log(error));
     },
-    saveIndicatorLedValue: ({ commit }, payload) => {
-      api
+    async saveIndicatorLedValue({ commit }, payload) {
+      await api
         .patch('/redfish/v1/Systems/system', { IndicatorLED: payload })
         .then(() => {
           commit('setIndicatorValue', payload);
diff --git a/src/views/Control/ServerLed/ServerLed.vue b/src/views/Control/ServerLed/ServerLed.vue
index 1b1c24ab..0e5bf500 100644
--- a/src/views/Control/ServerLed/ServerLed.vue
+++ b/src/views/Control/ServerLed/ServerLed.vue
@@ -30,9 +30,12 @@
 import PageTitle from '../../../components/Global/PageTitle';
 import PageSection from '../../../components/Global/PageSection';
 
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+
 export default {
   name: 'ServerLed',
   components: { PageTitle, PageSection },
+  mixins: [LoadingBarMixin],
   computed: {
     indicatorLED: {
       get() {
@@ -46,7 +49,14 @@ export default {
     }
   },
   created() {
-    this.$store.dispatch('serverLed/getIndicatorValue');
+    this.startLoader();
+    this.$store
+      .dispatch('serverLed/getIndicatorValue')
+      .finally(() => this.endLoader());
+  },
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
   }
 };
 </script>