diff --git a/frontend/src/components/LinkList.tsx b/frontend/src/components/LinkList.tsx index 6f768cf..9b198ac 100644 --- a/frontend/src/components/LinkList.tsx +++ b/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 -
- You can add ?source=TextHere to the end of the link to track the source of clicks - - ), + description: ( + <> + Link copied to clipboard +
+ 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) { - setStatsModal({ isOpen: false, linkId: null })} - linkId={statsModal.linkId!} - /> + {statsModal.isOpen && ( + Loading...}> + setStatsModal({ isOpen: false, linkId: null })} + linkId={statsModal.linkId!} + /> + + )} ) } \ No newline at end of file diff --git a/frontend/src/components/StatisticsModal.tsx b/frontend/src/components/StatisticsModal.tsx index db936dd..d1f6fbc 100644 --- a/frontend/src/components/StatisticsModal.tsx +++ b/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([]); const [sourcesData, setSourcesData] = useState([]); const [loading, setLoading] = useState(true);