feat: Add loader

app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue

@@ -4,6 +4,7 @@
     <SLAMetrics
       :hit-rate="slaMetrics.hitRate"
       :no-of-breaches="slaMetrics.numberOfSLABreaches"
+      :is-loading="uiFlags.isLoading"
     />
     <SLATable
       :sla-reports="slaReports"
@@ -35,6 +36,7 @@ export default {
       slaReports: 'slaReports/getAll',
       slaMetrics: 'slaReports/getMetrics',
       slaMeta: 'slaReports/getMeta',
+      uiFlags: 'slaReports/getUIFlags',
     }),
   },
   mounted() {

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue

@@ -1,36 +1,52 @@
-<script setup>
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  value: {
-    type: [String, Number],
-    required: true,
-  },
-  toolTip: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
 <template>
-  <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
-    <span
-      class="inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-200 font-medium"
-    >
-      {{ label }}
-      <fluent-icon
-        v-tooltip.right="toolTip"
-        size="14"
-        icon="information"
-        type="outline"
-        class="flex-shrink-0 text-sm font-normal flex sm:font-medium text-slate-500 dark:text-slate-500"
-      />
-    </span>
-    <span class="text-2xl font-medium text-slate-900 dark:text-slate-25">
-      {{ value }}
-    </span>
-  </div>
+  <SLA-metrics-layout :is-loading="isLoading">
+    <template #loading>
+      <div class="w-4 h-4 mb-0.5 rounded-md bg-slate-50 animate-pulse" />
+    </template>
+    <template #label>
+      <span
+        class="inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-200 font-medium"
+      >
+        {{ label }}
+        <fluent-icon
+          v-tooltip.right="toolTip"
+          size="14"
+          icon="information"
+          type="outline"
+          class="flex-shrink-0 text-sm font-normal flex sm:font-medium text-slate-500 dark:text-slate-500"
+        />
+      </span>
+    </template>
+    <template #value>
+      <span class="text-2xl font-medium text-slate-900 dark:text-slate-25">
+        {{ value }}
+      </span>
+    </template>
+  </SLA-metrics-layout>
 </template>
+<script>
+import SLAMetricsLayout from './SLAMetricsLayout.vue';
+export default {
+  components: {
+    SLAMetricsLayout,
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+    toolTip: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue

@@ -1,3 +1,26 @@
+<template>
+  <div
+    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
+  >
+    <SLAMetricCard
+      :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
+      :value="hitRate"
+      :tool-tip="$t('SLA_REPORTS.METRICS.HIT_RATE.TOOLTIP')"
+      :is-loading="isLoading"
+    />
+
+    <div
+      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
+    />
+    <SLAMetricCard
+      label="No of Breaches"
+      :value="noOfBreaches"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
+      :is-loading="isLoading"
+    />
+  </div>
+</template>
+
 <script setup>
 import SLAMetricCard from './SLAMetricCard.vue';
 defineProps({
@@ -9,25 +32,9 @@ defineProps({
     type: Number,
     required: true,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
-
-<template>
-  <div
-    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
-  >
-    <SLA-metric-card
-      :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
-      :value="hitRate"
-      :tool-tip="$t('SLA_REPORTS.METRICS.HIT_RATE.TOOLTIP')"
-    />
-    <div
-      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
-    />
-    <SLAMetricCard
-      label="No of Breaches"
-      :value="noOfBreaches"
-      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
-    />
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricsLayout.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<template>
+  <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
+    <slot name="label" />
+    <slot v-if="isLoading" name="loading" />
+    <slot v-else name="value" />
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/UserAvatar.vue

@@ -2,7 +2,7 @@
   <div
     :style="{ height: size, width: size }"
     class="rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
-    :title="username"
+    :title="userName"
   >
     <slot>
       <img