fix(routes/index): only render map client-side

This patch fixes a server-client error that was occurring because
`react-simple-maps` does not fully support server-side rendering.

I should fix this upstream, but this is a temporary fix to avoid
surfacing the error message in my application.

Ref: zcreativelabs/react-simple-maps#337

Author: nicholaschiang

app/components/client-only.tsx

@@ -0,0 +1,8 @@
+import { type PropsWithChildren, useState, useEffect } from 'react'
+
+export function ClientOnly({ children }: PropsWithChildren) {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  /* eslint-disable-next-line react/jsx-no-useless-fragment */
+  return mounted ? <>{children}</> : null
+}

app/routes/_index/route.tsx

@@ -15,6 +15,7 @@ import {
 
 import { type loader as locationAPI } from 'routes/api.locations.$location'
 
+import { ClientOnly } from 'components/client-only'
 import { LoadingLine } from 'components/loading-line'
 import { Button } from 'components/ui/button'
 import {
@@ -97,52 +98,54 @@ function Map({ className }: { className?: string }) {
   )
   return (
     <div className={cn('flex justify-center items-center', className)}>
-      <ComposableMap
-        className='object-scale-down max-w-full max-h-full'
-        projectionConfig={{ scale: 147 }}
-        width={800}
-        height={400}
-      >
-        <Sphere
-          id='sphere'
-          fill='transparent'
-          stroke='inherit'
-          className='stroke-gray-200 dark:stroke-gray-800'
-          strokeWidth={0.5}
-        />
-        <Graticule
-          className='stroke-gray-200 dark:stroke-gray-800'
-          strokeWidth={0.5}
-        />
-        <Geographies geography={geography}>
-          {({ geographies }) =>
-            geographies.map((geo) => (
-              /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-              <Geography
-                key={(geo as { rsmKey: string }).rsmKey}
-                geography={geo}
-                className='fill-gray-900 dark:fill-gray-100'
-              />
-              /* eslint-enable @typescript-eslint/no-unsafe-assignment */
-            ))
-          }
-        </Geographies>
-        {Object.entries(LOCATION_TO_COORDINATES).map(
-          ([location, coordinates]) => {
-            const stats = counts.find((c) => c.location === location)
-            if (stats == null || !hasLocation(stats)) return null
-            const radius = scale(stats.showsCount)
-            return (
-              <LocationMarker
-                key={location}
-                stats={stats}
-                radius={radius}
-                coordinates={coordinates}
-              />
-            )
-          },
-        )}
-      </ComposableMap>
+      <ClientOnly>
+        <ComposableMap
+          className='object-scale-down max-w-full max-h-full'
+          projectionConfig={{ scale: 147 }}
+          width={800}
+          height={400}
+        >
+          <Sphere
+            id='sphere'
+            fill='transparent'
+            stroke='inherit'
+            className='stroke-gray-200 dark:stroke-gray-800'
+            strokeWidth={0.5}
+          />
+          <Graticule
+            className='stroke-gray-200 dark:stroke-gray-800'
+            strokeWidth={0.5}
+          />
+          <Geographies geography={geography}>
+            {({ geographies }) =>
+              geographies.map((geo) => (
+                /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+                <Geography
+                  key={(geo as { rsmKey: string }).rsmKey}
+                  geography={geo}
+                  className='fill-gray-900 dark:fill-gray-100'
+                />
+                /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+              ))
+            }
+          </Geographies>
+          {Object.entries(LOCATION_TO_COORDINATES).map(
+            ([location, coordinates]) => {
+              const stats = counts.find((c) => c.location === location)
+              if (stats == null || !hasLocation(stats)) return null
+              const radius = scale(stats.showsCount)
+              return (
+                <LocationMarker
+                  key={location}
+                  stats={stats}
+                  radius={radius}
+                  coordinates={coordinates}
+                />
+              )
+            },
+          )}
+        </ComposableMap>
+      </ClientOnly>
     </div>
   )
 }