Lazy load Statistics Modal

Author: WaveringAna

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;
@@ -85,13 +87,13 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
 		const baseUrl = window.location.origin
 		navigator.clipboard.writeText(`${baseUrl}/${shortCode}`)
 		toast({
-		  description: (
-			<>
-			  Link copied to clipboard
-			  <br />
-			  You can add ?source=TextHere to the end of the link to track the source of clicks
-			</>
-		  ),
+			description: (
+				<>
+					Link copied to clipboard
+					<br />
+					You can add ?source=TextHere to the end of the link to track the source of clicks
+				</>
+			),
 		})
 	}
 
@@ -186,11 +188,15 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
 					</div>
 				</CardContent>
 			</Card>
-			<StatisticsModal
-				isOpen={statsModal.isOpen}
-				onClose={() => setStatsModal({ isOpen: false, linkId: null })}
-				linkId={statsModal.linkId!}
-			/>
+			{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);