#428

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
-import { Fragment, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { Fragment, Suspense, lazy, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createBrowserRouter,
 	 Navigate,
@@ -40,7 +40,7 @@ import MaterialListPage from '@/pages/materials/MaterialListPage'
 import MaterialNewPage from '@/pages/materials/MaterialNewPage'
 import MaterialSyncSuppressionsPage from '@/pages/materials/MaterialSyncSuppressionsPage'
 import MorePage from '@/pages/MorePage'
-import GekanatorPage from '@/pages/GekanatorPage'
+import GekanatorUnavailablePage from '@/pages/GekanatorUnavailablePage'
 import NicoTagListPage from '@/pages/tags/NicoTagListPage'
 import NotFound from '@/pages/NotFound'
 import TOSPage from '@/pages/TOSPage'
@@ -72,6 +72,23 @@ import type { ClientAnimationMode } from '@/lib/settings'
 import type { AvailableLocale } from '@/lib/locales'
 import type { User } from '@/types'
 
+const GekanatorPage = lazy (() => import ('@/pages/GekanatorPage'))
+
+
+const GekanatorRoute = ({ user }: { user: User | null }) => {
+  const locale = useLocale ()
+  const location = useLocation ()
+  const pageLocale = requiredPageLocale (location.pathname)
+
+  if (pageLocale != null && pageLocale !== locale)
+    return <GekanatorUnavailablePage/>
+
+  return (
+      <Suspense fallback={null}>
+	<GekanatorPage user={user}/>
+      </Suspense>)
+}
+
 
 const RouteTransitionWrapper = ({ animationMode, user, setUser }: {
     animationMode:  ClientAnimationMode
@@ -114,7 +131,7 @@ const RouteTransitionWrapper = ({ animationMode, user, setUser }: {
 	<Route path="users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
 	<Route path="settings" element={<LocaleRedirect to="/users/settings"/>}/>
 	<Route path="tos" element={<TOSPage/>}/>
-	<Route path="gekanator" element={<GekanatorPage user={user}/>}/>
+	<Route path="gekanator" element={<GekanatorRoute user={user}/>}/>
 	<Route path="more" element={<MorePage/>}/>
 	<Route path="*" element={<NotFound/>}/>
       </Routes>)
@@ -278,11 +295,9 @@ const LocaleRoute: FC = () => {
       refetchOnMount: 'always',
       refetchOnWindowFocus: 'always',
       refetchOnReconnect: 'always' })
-  const pageLocale = requiredPageLocale (location.pathname)
   const activeLocale =
       (isLocaleCode (locale)
-       && data?.locales.some (entry => entry.code === locale)
-       && (pageLocale == null || pageLocale === locale))
+       && data?.locales.some (entry => entry.code === locale))
       ? locale
       : null
 
@@ -304,12 +319,6 @@ const LocaleRoute: FC = () => {
     return <ServiceUnavailable/>
   if (isPending)
     return null
-  if (pageLocale != null && isLocaleCode (locale) && pageLocale !== locale)
-  {
-    return data.locales.some (entry => entry.code === pageLocale)
-	? <Navigate to={switchLocalePath (location, pageLocale)} replace/>
-	: <NotFound/>
-  }
   if (isLocaleCode (locale))
   {
     return data.locales.some (entry => entry.code === locale)