+19
-13
frontend/src/components/LinkList.tsx
+19
-13
frontend/src/components/LinkList.tsx
···
1
+
import { lazy, Suspense } from 'react'
2
+
1
3
import { useEffect, useState } from 'react'
2
4
import { Link } from '../types/api'
3
5
import { getAllLinks, deleteLink } from '../api/client'
···
22
24
DialogFooter,
23
25
} from "@/components/ui/dialog"
24
26
25
-
import { StatisticsModal } from "./StatisticsModal"
27
+
const StatisticsModal = lazy(() => import('./StatisticsModal'))
26
28
27
29
interface LinkListProps {
28
30
refresh?: number;
···
85
87
const baseUrl = window.location.origin
86
88
navigator.clipboard.writeText(`${baseUrl}/${shortCode}`)
87
89
toast({
88
-
description: (
89
-
<>
90
-
Link copied to clipboard
91
-
<br />
92
-
You can add ?source=TextHere to the end of the link to track the source of clicks
93
-
</>
94
-
),
90
+
description: (
91
+
<>
92
+
Link copied to clipboard
93
+
<br />
94
+
You can add ?source=TextHere to the end of the link to track the source of clicks
95
+
</>
96
+
),
95
97
})
96
98
}
97
99
···
186
188
</div>
187
189
</CardContent>
188
190
</Card>
189
-
<StatisticsModal
190
-
isOpen={statsModal.isOpen}
191
-
onClose={() => setStatsModal({ isOpen: false, linkId: null })}
192
-
linkId={statsModal.linkId!}
193
-
/>
191
+
{statsModal.isOpen && (
192
+
<Suspense fallback={<div>Loading...</div>}>
193
+
<StatisticsModal
194
+
isOpen={statsModal.isOpen}
195
+
onClose={() => setStatsModal({ isOpen: false, linkId: null })}
196
+
linkId={statsModal.linkId!}
197
+
/>
198
+
</Suspense>
199
+
)}
194
200
</>
195
201
)
196
202
}
+1
-1
frontend/src/components/StatisticsModal.tsx
+1
-1
frontend/src/components/StatisticsModal.tsx
···
58
58
return null;
59
59
};
60
60
61
-
export function StatisticsModal({ isOpen, onClose, linkId }: StatisticsModalProps) {
61
+
export default function StatisticsModal({ isOpen, onClose, linkId }: StatisticsModalProps) {
62
62
const [clicksOverTime, setClicksOverTime] = useState<EnhancedClickStats[]>([]);
63
63
const [sourcesData, setSourcesData] = useState<SourceStats[]>([]);
64
64
const [loading, setLoading] = useState(true);