Lazy load Statistics Modal

frontend/src/components/LinkList.tsx

@@ -1,3 +1,5 @@
+import { lazy, Suspense } from 'react'
+
 import { useEffect, useState } from 'react'
 import { Link } from '../types/api'
 import { getAllLinks, deleteLink } from '../api/client'
@@ -22,7 +24,7 @@ import {
 	DialogFooter,
 } from "@/components/ui/dialog"
 
-import { StatisticsModal } from "./StatisticsModal"
+const StatisticsModal = lazy(() => import('./StatisticsModal'))
 
 interface LinkListProps {
 	refresh?: number;
@@ -186,11 +188,15 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
 					</div>
 				</CardContent>
 			</Card>
+			{statsModal.isOpen && (
+				<Suspense fallback={<div>Loading...</div>}>
 					<StatisticsModal
 						isOpen={statsModal.isOpen}
 						onClose={() => setStatsModal({ isOpen: false, linkId: null })}
 						linkId={statsModal.linkId!}
 					/>
+				</Suspense>
+			)}
 		</>
 	)
 }

frontend/src/components/StatisticsModal.tsx

@@ -58,7 +58,7 @@ const CustomTooltip = ({
   return null;
 };
 
-export function StatisticsModal({ isOpen, onClose, linkId }: StatisticsModalProps) {
+export default function StatisticsModal({ isOpen, onClose, linkId }: StatisticsModalProps) {
   const [clicksOverTime, setClicksOverTime] = useState<EnhancedClickStats[]>([]);
   const [sourcesData, setSourcesData] = useState<SourceStats[]>([]);
   const [loading, setLoading] = useState(true);