fix: hydration on ssr pages (#4022)

src/routes/_.how-to.$slug._index.tsx

@@ -20,6 +20,12 @@ export async function loader({ params }: LoaderFunctionArgs) {
   return json({ howto })
 }
 
+export function HydrateFallback() {
+  // This is required because all routes are loaded client-side. Avoids a page flicker before css is loaded.
+  // Can be removed once ALL pages are using SSR.
+  return <div></div>
+}
+
 export const meta = mergeMeta<typeof loader>(({ data }) => {
   const howto = data?.howto as IHowtoDB
 

src/routes/_.questions.$slug._index.tsx

@@ -20,6 +20,12 @@ export async function loader({ params }: LoaderFunctionArgs) {
   return json({ question })
 }
 
+export function HydrateFallback() {
+  // This is required because all routes are loaded client-side. Avoids a page flicker before css is loaded.
+  // Can be removed once ALL pages are using SSR.
+  return <div></div>
+}
+
 export const meta = mergeMeta<typeof loader>(({ data }) => {
   const question = data?.question as IQuestionDB
 

src/routes/_.research.$slug._index.tsx

@@ -25,6 +25,12 @@ export async function loader({ params }: LoaderFunctionArgs) {
   return json({ research, publicUpdates })
 }
 
+export function HydrateFallback() {
+  // This is required because all routes are loaded client-side. Avoids a page flicker before css is loaded.
+  // Can be removed once ALL pages are using SSR.
+  return <div></div>
+}
+
 export const meta = mergeMeta<typeof loader>(({ data }) => {
   const research = data?.research as IResearchDB
   const publicUpdates = data?.publicUpdates as IResearch.UpdateDB[]

src/routes/_.u.$id._index.tsx

@@ -25,6 +25,12 @@ export async function loader({ params }: LoaderFunctionArgs) {
   return json({ profile, userCreatedDocs: userCreatedDocs || [] })
 }
 
+export function HydrateFallback() {
+  // This is required because all routes are loaded client-side. Avoids a page flicker before css is loaded.
+  // Can be removed once ALL pages are using SSR.
+  return <div></div>
+}
+
 export const meta = mergeMeta<typeof loader>(({ data }) => {
   const profile = data?.profile as IUserDB