Use an effect

src/pages/share/safe-app.tsx

@@ -1,16 +1,25 @@
-import { Box, CircularProgress } from '@mui/material'
+import { useEffect } from 'react'
+import Head from 'next/head'
 import { useRouter } from 'next/router'
+import { Box, CircularProgress } from '@mui/material'
 import { useSafeAppUrl } from '@/hooks/safe-apps/useSafeAppUrl'
 import { useChainFromQueryParams } from '@/hooks/safe-apps/useChainFromQueryParams'
 import { SafeAppLanding } from '@/components/safe-apps/SafeAppLandingPage'
 import { AppRoutes } from '@/config/routes'
-import Head from 'next/head'
 
 const ShareSafeApp = () => {
   const router = useRouter()
   const appUrl = useSafeAppUrl()
   const { chain, validChain, loading: chainLoading, error: chainError } = useChainFromQueryParams()
 
+  useEffect(() => {
+    if (chainLoading) return
+
+    if (router.isReady && (!appUrl || !validChain || !chain)) {
+      router.push(AppRoutes.index)
+    }
+  }, [appUrl, validChain, chain, chainLoading, router])
+
   if (chainLoading) {
     return (
       <Box py={4} textAlign="center">
@@ -19,8 +28,7 @@ const ShareSafeApp = () => {
     )
   }
 
-  if (router.isReady && (!appUrl || !validChain || !chain)) {
-    router.push(AppRoutes.index)
+  if (!appUrl || !validChain || !chain) {
     return null
   }
 
@@ -34,7 +42,9 @@ const ShareSafeApp = () => {
         <title>Safe Apps – Share</title>
       </Head>
 
-      <main>{appUrl && chain && <SafeAppLanding appUrl={appUrl} chain={chain} />}</main>
+      <main>
+        <SafeAppLanding appUrl={appUrl} chain={chain} />
+      </main>
     </>
   )
 }