Use HydrateFallback

BlossomLabs · Nov 6, 2024 · b2e3250 · b2e3250
1 parent 8b4b3f8
commit b2e3250
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/apps/web/src/app/root.tsx b/apps/web/src/app/root.tsx
@@ -43,6 +43,8 @@ export function links() {
 }
 
 export const meta: MetaFunction = () => [
+  { charset: "utf-8" },
+  { viewport: "width=device-width, initial-scale=1" },
   { title: SITE_NAME },
   { name: "title", content: SITE_NAME },
   { name: "description", content: SITE_DESCRIPTION },
@@ -58,12 +60,24 @@ export const meta: MetaFunction = () => [
   { name: "twitter:site", content: SOCIAL_TWITTER },
 ];
 
+export function HydrateFallback() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body style={{ backgroundColor: "#111827" }}>
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
 export default function App() {
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
       </head>

diff --git a/apps/web/src/app/routes/_index.tsx b/apps/web/src/app/routes/_index.tsx
@@ -1,13 +1,10 @@
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { redirect } from "@remix-run/react";
 import { DEFAULT_COUNCIL_ADDRESS, NETWORK } from "../../../../../constants";
 
-export default function IndexPage() {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    navigate(`/c/${NETWORK}/${DEFAULT_COUNCIL_ADDRESS}`);
-  }, [navigate]);
+export async function clientLoader() {
+  return redirect(`/c/${NETWORK}/${DEFAULT_COUNCIL_ADDRESS}`);
+}
 
+export default function IndexPage() {
   return null;
 }
diff --git a/turbo.json b/turbo.json
@@ -5,7 +5,7 @@
     "build": {
       "dependsOn": ["^build"],
       "inputs": ["$TURBO_DEFAULT$", ".env*"],
-      "outputs": [".next/**", "!.next/cache/**"]
+      "outputs": ["build/**"]
     },
     "//#format-and-lint": {},
     "//#format-and-lint:fix": {