fix: improve Analytics component; wrap it in Suspense boundary

app/layout.tsx

@@ -56,7 +56,7 @@ export default function RootLayout({
         >
           {children}
           <Toaster />
-          <Analytics />
+          <Analytics pagesRouter={false} />
         </ThemeProvider>
       </body>
     </html>

components/shared/providers/Analytics.tsx

@@ -1,36 +1,28 @@
 "use client";
-import { useEffect } from "react";
+import { useEffect, Suspense } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 const MATOMO_URL = `${process.env.NEXT_PUBLIC_MATOMO_URL}`;
 const MATOMO_SITE_ID = `${process.env.NEXT_PUBLIC_MATOMO_SITE_ID}`;
 let firstUseEffect = true;
 let firstUseEffect2 = true;
-let secondUseEffect2 = true;
 
-export default function AuthProvider() {
+function AnalyticsInternal(props: { pagesRouter?: boolean }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  useEffect(() => {
-    if (firstUseEffect2) {
-      firstUseEffect2 = false;
-      return;
-    }
-    if (secondUseEffect2) {
-      secondUseEffect2 = false;
-      return;
-    }
-
-    // Track page view
-    const _paq = ((window as any)._paq = (window as any)._paq || []);
-    _paq.push(["setDocumentTitle", document.title]);
-    _paq.push(["trackPageView"]);
-  }, [pathname, searchParams]);
-
   useEffect(() => {
     if (firstUseEffect) {
       firstUseEffect = false;
     } else {
+      if (firstUseEffect2) {
+        firstUseEffect2 = false;
+        if (props.pagesRouter) return;
+      }
+
+      // Track page view
+      const _paq = ((window as any)._paq = (window as any)._paq || []);
+      _paq.push(["setDocumentTitle", document.title]);
+      _paq.push(["trackPageView"]);
       return;
     }
 
@@ -51,7 +43,15 @@ export default function AuthProvider() {
       g.src = u + "matomo.js";
       (s.parentNode as ParentNode).insertBefore(g, s);
     })();
-  }, []);
+  }, [pathname, searchParams]);
 
   return null;
 }
+
+export default function Analytics(props: { pagesRouter?: boolean }) {
+  return (
+    <Suspense>
+      <AnalyticsInternal {...props} />
+    </Suspense>
+  );
+}

pages/_app.tsx

@@ -18,7 +18,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       `}</style>
       <div className={`antialiased ${poppins.className}`}>
         <Component {...pageProps} />
-        <Analytics />
+        <Analytics pagesRouter={true} />
       </div>
     </>
   );