style updates

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

@@ -4,7 +4,7 @@
     <SLAMetrics
       :hit-rate="slaMetrics.hitRate"
       :no-of-breaches="slaMetrics.numberOfSLABreaches"
-      :is-loading="uiFlags.isLoading"
+      :is-loading="true"
     />
     <SLATable
       :sla-reports="slaReports"

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

@@ -1,7 +1,7 @@
 <template>
   <SLA-metrics-layout :is-loading="isLoading">
     <template #loading>
-      <div class="w-4 h-4 mb-0.5 rounded-md bg-slate-50 animate-pulse" />
+      <div class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 animate-pulse" />
     </template>
     <template #label>
       <span

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

@@ -13,7 +13,7 @@
       class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
     />
     <SLAMetricCard
-      label="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.LABEL')"
+      :label="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.LABEL')"
       :value="noOfBreaches"
       :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
       :is-loading="isLoading"