refactor(statistics): improve component structure and enhance state management

- Introduced Suspense for lazy loading in StatisticsPage to optimize rendering.
- Refactored StatisticsPage to separate inner logic into StatisticsPageInner for better readability.
- Updated PeriodSelector to utilize useCallback for handling state changes, improving performance and clarity.

Co-authored-by: Cursor <[email protected]>

app/(main)/statistics/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { useRouter, useSearchParams } from "next/navigation"
+import { Suspense, useCallback, useEffect, useMemo, useState } from "react"
+import { useSearchParams } from "next/navigation"
 import {
   ActivityIcon,
   DatabaseIcon,
@@ -254,8 +254,7 @@ function chipList(slices: CubeSlices): { key: string; label: string }[] {
   return chips
 }
 
-export default function StatisticsPage() {
-  const router = useRouter()
+function StatisticsPageInner() {
   const searchParams = useSearchParams()
   const { mode, backendUrl, prefsHydrated } = useDataSource()
   const isLive = mode === "live"
@@ -282,9 +281,10 @@ export default function StatisticsPage() {
         else sp.delete(k)
       }
       const qs = sp.toString()
-      router.replace(qs ? `/statistics?${qs}` : "/statistics")
+      if (qs === searchParams.toString()) return
+      window.history.replaceState(null, "", qs ? `/statistics?${qs}` : "/statistics")
     },
-    [router, searchParams],
+    [searchParams],
   )
 
   const setRange = useCallback(
@@ -548,3 +548,11 @@ export default function StatisticsPage() {
     </div>
   )
 }
+
+export default function StatisticsPage() {
+  return (
+    <Suspense fallback={null}>
+      <StatisticsPageInner />
+    </Suspense>
+  )
+}