docs: add fallback to remix example

docs/guides/ssr-and-frameworks.md

@@ -38,11 +38,14 @@ export default function MyMap() {
 
 ## Remix
 
-And here is a component that can be used in a Remix application. Checkout the example [code](https://github.com/visgl/react-google-maps/tree/main/examples/remix) on Github or play around with the [demo](https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/remix) on Codesandbox.
+Here is the best approach we found to use a map component in a Remix application. Checkout the example [code](https://github.com/visgl/react-google-maps/tree/main/examples/remix) on Github or play around with the [demo](https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/remix) on Codesandbox.
+
+Wrap the map in a `<ClientOnly>` component from the [`remix-utils`](https://github.com/sergiodxa/remix-utils) package for it to be rendered only on the client.
 
 :::note
 
-The component needs to be wrapped `<ClientOnly>` component from the `remix-utils` package for it to be rendered only on the client.
+If you use a fallback and you know the dimensions of your final map, make sure that
+the fallback has the same size to prevent layout shifts when the map component loads.
 
 :::
 
@@ -52,7 +55,7 @@ import {ClientOnly} from 'remix-utils/client-only';
 
 export default function MyMap() {
   return (
-    <ClientOnly>
+    <ClientOnly fallback={<MapFallback />}>
       {() => (
         <APIProvider apiKey={'...'}>
           <Map

examples/remix/app/components/map/map-fallback.module.css

@@ -0,0 +1,7 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

examples/remix/app/components/map/map-fallback.tsx

@@ -0,0 +1,5 @@
+import styles from './map-fallback.module.css';
+
+export default function MyMapFallback() {
+  return <div className={styles.container}>Map loading...</div>;
+}

examples/remix/app/components/map/map.client.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 
 import styles from './map.module.css';

examples/remix/app/routes/_index.tsx

@@ -1,11 +1,10 @@
-import type {MetaFunction} from '@remix-run/node';
-import MyMap from '../components/map/map.client';
 import {ClientOnly} from 'remix-utils/client-only';
 
-export const meta: MetaFunction = () => {
-  return [{title: 'Remix Example'}];
-};
+import MyMap from '../components/map/map.client';
+import MyMapFallback from '../components/map/map-fallback';
 
 export default function Index() {
-  return <ClientOnly>{() => <MyMap />}</ClientOnly>;
+  return (
+    <ClientOnly fallback={<MyMapFallback />}>{() => <MyMap />}</ClientOnly>
+  );
 }