diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
index 74979f73b..75a474d01 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { NoContent, Pagination } from 'UI';
+import { Loader, NoContent, Pagination } from 'UI';
 import { filterList } from 'App/utils';
 import { sliceListPerPage } from 'App/utils';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
@@ -31,46 +31,48 @@ function AlertsList({ siteId }: Props) {
   const list = alertsSearch !== '' ? filteredAlerts : alertsArray;
 
   return (
-    <NoContent
-      show={list.length === 0}
-      title={
-        <div className="flex flex-col items-center justify-center">
-          <AnimatedSVG name={ICONS.NO_ALERTS} size={180} />
-          <div className="text-center mt-4">
-            {alertsSearch !== '' ? 'No matching results' : "You haven't created any alerts yet"}
+    <Loader loading={alertsStore.loading}>
+      <NoContent
+        show={list.length === 0}
+        title={
+          <div className='flex flex-col items-center justify-center'>
+            <AnimatedSVG name={ICONS.NO_ALERTS} size={180} />
+            <div className='text-center mt-4'>
+              {alertsSearch !== '' ? 'No matching results' : 'You haven\'t created any alerts yet'}
+            </div>
           </div>
-        </div>
-      }
-      subtext="Configure alerts to stay informed about app activity with threshold or change-based notifications."
-    >
-      <div className="mt-3 border-b">
-        <div className="grid grid-cols-12 py-2 font-medium px-6">
-          <div className="col-span-8">Title</div>
-          <div className="col-span-2">Type</div>
-          <div className="col-span-2 text-right">Modified</div>
+        }
+        subtext='Configure alerts to stay informed about app activity with threshold or change-based notifications.'
+      >
+        <div className='mt-3 border-b'>
+          <div className='grid grid-cols-12 py-2 font-medium px-6'>
+            <div className='col-span-8'>Title</div>
+            <div className='col-span-2'>Type</div>
+            <div className='col-span-2 text-right'>Modified</div>
+          </div>
+
+          {sliceListPerPage(list, page - 1, pageSize).map((alert: any) => (
+            <React.Fragment key={alert.alertId}>
+              <AlertListItem alert={alert} siteId={siteId} init={init} webhooks={webhooks} />
+            </React.Fragment>
+          ))}
         </div>
 
-        {sliceListPerPage(list, page - 1, pageSize).map((alert: any) => (
-          <React.Fragment key={alert.alertId}>
-            <AlertListItem alert={alert} siteId={siteId} init={init} webhooks={webhooks} />
-          </React.Fragment>
-        ))}
-      </div>
-
-      <div className="w-full flex items-center justify-between pt-4 px-6">
-        <div className="text-disabled-text">
-          Showing <span className="font-semibold">{Math.min(list.length, pageSize)}</span> out of{' '}
-          <span className="font-semibold">{list.length}</span> Alerts
+        <div className='w-full flex items-center justify-between pt-4 px-6'>
+          <div className='text-disabled-text'>
+            Showing <span className='font-semibold'>{Math.min(list.length, pageSize)}</span> out of{' '}
+            <span className='font-semibold'>{list.length}</span> Alerts
+          </div>
+          <Pagination
+            page={page}
+            totalPages={Math.ceil(list.length / pageSize)}
+            onPageChange={(page) => alertsStore.updateKey('page', page)}
+            limit={pageSize}
+            debounceRequest={100}
+          />
         </div>
-        <Pagination
-          page={page}
-          totalPages={Math.ceil(list.length / pageSize)}
-          onPageChange={(page) => alertsStore.updateKey('page', page)}
-          limit={pageSize}
-          debounceRequest={100}
-        />
-      </div>
-    </NoContent>
+      </NoContent>
+    </Loader>
   );
 }
 
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index b8a872685..a55a62618 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -8,9 +8,9 @@ import ListView from './ListView';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 function MetricsList({
-  siteId,
-  onSelectionChange,
-}: {
+                       siteId,
+                       onSelectionChange
+                     }: {
   siteId: string;
   onSelectionChange?: (selected: any[]) => void;
 }) {
@@ -18,7 +18,7 @@ function MetricsList({
   const metricsSearch = metricStore.filter.query;
   const listView = useObserver(() => metricStore.listView);
   const [selectedMetrics, setSelectedMetrics] = useState<any>([]);
-  
+
   const dashboard = dashboardStore.selectedDashboard;
   const existingCardIds = useMemo(() => dashboard?.widgets?.map(i => parseInt(i.metricId)), [dashboard]);
   const cards = useMemo(() => !!onSelectionChange ? metricStore.filteredCards.filter(i => !existingCardIds?.includes(parseInt(i.metricId))) : metricStore.filteredCards, [metricStore.filteredCards]);
@@ -54,14 +54,14 @@ function MetricsList({
       <NoContent
         show={lenth === 0}
         title={
-          <div className="flex flex-col items-center justify-center">
+          <div className='flex flex-col items-center justify-center'>
             <AnimatedSVG name={ICONS.NO_CARDS} size={180} />
-            <div className="text-center mt-4">
-              {metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
+            <div className='text-center mt-4'>
+              {metricsSearch !== '' ? 'No matching results' : 'You haven\'t created any cards yet'}
             </div>
           </div>
         }
-        subtext="Utilize cards to visualize key user interactions or product performance metrics."
+        subtext='Utilize cards to visualize key user interactions or product performance metrics.'
       >
         {listView ? (
           <ListView
@@ -85,11 +85,11 @@ function MetricsList({
           />
         )}
 
-        <div className="w-full flex items-center justify-between py-4 px-6 border-t">
-          <div className="text-disabled-text">
+        <div className='w-full flex items-center justify-between py-4 px-6 border-t'>
+          <div className='text-disabled-text'>
             Showing{' '}
-            <span className="font-semibold">{Math.min(cards.length, metricStore.pageSize)}</span> out
-            of <span className="font-semibold">{cards.length}</span> cards
+            <span className='font-semibold'>{Math.min(cards.length, metricStore.pageSize)}</span> out
+            of <span className='font-semibold'>{cards.length}</span> cards
           </div>
           <Pagination
             page={metricStore.page}