Improved: added skeleton text to the new detail items (hotwax#524)

amansinghbais · Nov 25, 2024 · b7835b7 · b7835b7
1 parent 4660dd0
commit b7835b7
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/src/views/Fulfillment.vue b/src/views/Fulfillment.vue
@@ -48,15 +48,18 @@
             </ion-card-header>
             <ion-item button @click="viewJobConfiguration({ id: 'OPN_BOPIS_ORD_NT', status: getJobStatus(jobEnums['OPN_BOPIS_ORD_NT']) })" detail>
               <ion-label class="ion-text-wrap">{{ translate("Open BOPIS order notification") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('OPN_BOPIS_ORD_NT') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('OPN_BOPIS_ORD_NT') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item button @click="viewJobConfiguration({ id: 'READYPICK_BOPIS_ORD_NT', status: getJobStatus(jobEnums['READYPICK_BOPIS_ORD_NT']) })" detail>
               <ion-label class="ion-text-wrap">{{ translate("Ready to pick BOPIS order notification") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('READYPICK_BOPIS_ORD_NT') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('READYPICK_BOPIS_ORD_NT') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item button @click="viewJobConfiguration({ id: 'OPEN_SHIPPING_ORD_NT', status: getJobStatus(jobEnums['OPEN_SHIPPING_ORD_NT']) })" detail>
               <ion-label class="ion-text-wrap">{{ translate("Open shipping order notification") }}</ion-label>
-              <ion-label slot="end">{{ getTemporalExpression('OPEN_SHIPPING_ORD_NT') }}</ion-label>
+              <ion-label v-if="!isLoading" slot="end">{{ getTemporalExpression('OPEN_SHIPPING_ORD_NT') }}</ion-label>
+              <ion-skeleton-text v-else style="width: 30%;" animated />
             </ion-item>
             <ion-item lines="none">
               <ion-label class="ion-text-wrap">
@@ -164,7 +167,7 @@ export default defineComponent({
       autoCancelDays: '',
       enumTypeId: 'FULFILLMENT_SYS_JOB',
       initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
-      isLoading: true
+      isLoading: false
     }
   },
   computed: {
@@ -238,6 +241,7 @@ export default defineComponent({
       }
     },
     async fetchJobs(){
+      this.isLoading = true
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {
           "enumTypeId": "FULFILLMENT_SYS_JOB"

diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue
@@ -103,7 +103,7 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       enumTypeId: 'INVENTORY_SYS_JOB',
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
-      isLoading: true
+      isLoading: false
     }
   },
   computed: {
@@ -170,6 +170,7 @@ export default defineComponent({
         translate('Disabled')
     },
     async fetchJobs(){
+      this.isLoading = true
       await this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "enumTypeId": "INVENTORY_SYS_JOB"

diff --git a/src/views/Orders.vue b/src/views/Orders.vue
@@ -162,7 +162,7 @@ export default defineComponent({
       isDesktop: isPlatform('desktop'),
       enumTypeId: 'ORDER_SYS_JOB',
       initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
-      isLoading: true
+      isLoading: false
     }
   },
   computed: {
@@ -280,6 +280,7 @@ export default defineComponent({
         translate('Disabled')
     },
     async fetchJobs(){
+      this.isLoading = true;
       this.store.dispatch('webhook/fetchWebhooks')
       await this.store.dispatch("job/fetchJobs", {
         "inputFields": {

diff --git a/src/views/Product.vue b/src/views/Product.vue
@@ -131,7 +131,7 @@ export default defineComponent({
       webhookEnums: JSON.parse(process.env?.VUE_APP_WEBHOOK_ENUMS as string) as any,
       enumTypeId: 'PRODUCT_SYS_JOB',
       initialLoadJobEnums: JSON.parse(process.env?.VUE_APP_INITIAL_JOB_ENUMS as string) as any,
-      isLoading: true
+      isLoading: false
     }
   },
   mounted () {
@@ -193,6 +193,7 @@ export default defineComponent({
         translate('Disabled')
     },
     async fetchJobs(){
+      this.isLoading = true
       await this.store.dispatch("job/fetchJobs", {
         "inputFields":{
           "enumTypeId": "PRODUCT_SYS_JOB"