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);