add lazy load to dashboard

dashboard/components/dashboard/BrowsersBarCard.vue

@@ -3,7 +3,10 @@
 import type { BrowsersAggregated } from '~/server/api/metrics/[project_id]/data/browsers';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();

dashboard/components/dashboard/DevicesBarCard.vue

@@ -3,7 +3,10 @@
 import type { DevicesAggregated } from '~/server/api/metrics/[project_id]/data/devices';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();

dashboard/components/dashboard/EventsBarCard.vue

@@ -3,7 +3,10 @@
 import type { CustomEventsAggregated } from '~/server/api/metrics/[project_id]/visits/events';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/visits/events`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 const router = useRouter();
 
@@ -35,7 +38,8 @@ function showMore() {
 
 <template>
     <div class="flex flex-col gap-2 h-full">
-        <DashboardBarsCard  @showMore="showMore()" @showRawData="goToView()" desc="Most frequent user events triggered in this project" @dataReload="refresh" :data="events || []" :loading="pending" label="Top Events"
+        <DashboardBarsCard @showMore="showMore()" @showRawData="goToView()"
-            sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
+            desc="Most frequent user events triggered in this project" @dataReload="refresh" :data="events || []"
+            :loading="pending" label="Top Events" sub-label="Events" :rawButton="!isLiveDemo()"></DashboardBarsCard>
     </div>
 </template>

dashboard/components/dashboard/GeolocationBarCard.vue

@@ -4,7 +4,10 @@ import type { CountriesAggregated } from '~/server/api/metrics/[project_id]/data
 import type { IconProvider } from './BarsCard.vue';
 
 const activeProject = await useActiveProject();
-const { data: countries, pending, refresh } = await useFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`, signHeaders());
+const { data: countries, pending, refresh } = await useFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`, {
+    ...signHeaders(),    
+    lazy: true
+});
 
 function iconProvider(id: string): ReturnType<IconProvider> {
     if (id === 'self') return ['icon', 'fas fa-link'];

dashboard/components/dashboard/OssBarCard.vue

@@ -3,7 +3,10 @@
 import type { OssAggregated } from '~/server/api/metrics/[project_id]/data/oss';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();

dashboard/components/dashboard/ReferrersBarCard.vue

@@ -5,7 +5,10 @@ import type { IconProvider } from './BarsCard.vue';
 import ReferrerBarChart from '../referrer/ReferrerBarChart.vue';
 
 const activeProject = await useActiveProject();
-const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, signHeaders());
+const { data: events, pending, refresh } = await useFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`, {
+    ...signHeaders(),
+    lazy: true
+});
 
 
 function iconProvider(id: string): ReturnType<IconProvider> {

dashboard/components/dashboard/TopCards.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { MetricsTimeline } from '~/server/api/metrics/[project_id]/timeline/generic';
+
 import DateService from '@services/DateService';
 
 const { data: metricsInfo } = useMetricsData();

dashboard/composables/useDataService.ts

@@ -6,7 +6,10 @@ import type { MetricsTimeline } from "~/server/api/metrics/[project_id]/timeline
 
 export function useMetricsData() {
     const activeProject = useActiveProject();
-    const metricsInfo = useFetch<MetricsCounts>(`/api/metrics/${activeProject.value?._id}/counts`, signHeaders());
+    const metricsInfo = useFetch<MetricsCounts>(`/api/metrics/${activeProject.value?._id}/counts`, {
+        ...signHeaders(),
+        lazy: true
+    });
     return metricsInfo;
 }
 
@@ -55,7 +58,7 @@ export async function useTimelineDataRaw(timelineEndpointName: string, slice: Sl
         `/api/metrics/${activeProject.value?._id}/timeline/${timelineEndpointName}`, {
         method: 'POST',
         ...signHeaders({ 'Content-Type': 'application/json' }),
-        body: JSON.stringify({ slice })
+        body: JSON.stringify({ slice }),
     });
 
     return response;
@@ -77,6 +80,7 @@ export function usePagesData(website: string, limit: number = 10) {
             'x-website-name': website
         }),
         key: `pages_data:${website}:${limit}`,
+        lazy: true
     });
 
     return res;
@@ -88,6 +92,7 @@ export function useWebsitesData(limit: number = 10) {
     const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`, {
         ...signHeaders({ 'x-query-limit': limit.toString() }),
         key: `websites_data:${limit}`,
+        lazy: true
     });
     return res;
 }

dashboard/pages/index.vue

@@ -131,6 +131,7 @@ const selectLabels = [
                 </div>
             </div>
 
+      
             <div class="flex w-full justify-center mt-6 px-6">
                 <div class="flex w-full gap-6 flex-col xl:flex-row">
                     <div class="flex-1">
@@ -161,7 +162,7 @@ const selectLabels = [
                     <div class="flex-1">
                     </div>
                 </div>
-            </div>
+            </div> 
 
         </div>