feat: client only component

app/utils/misc.tsx

@@ -1,4 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
+import { useHydrated } from 'remix-utils/use-hydrated'
 import { clsx, type ClassValue } from 'clsx'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useSpinDelay } from 'spin-delay'
@@ -13,6 +14,33 @@
 	return `/resources/note-images/${imageId}`
 }
 
+// credit: https://www.jacobparis.com/content/remix-progressive-client-only
+export function ProgressiveClientOnly({
+	children,
+	className = '',
+	defaultShow = false,
+}: {
+	children: React.ReactNode | (() => React.ReactNode)
+	className?: string
+	defaultShow?: boolean
+}) {
+	const isHydrated = useHydrated()
+	return (
+		<div
+			className={
+				isHydrated
+					? className
+					: defaultShow
+						? // Create these animations in CSS or your tailwind config
+							'[animation:disappear_1000ms]'
+						: '[animation:appear_1000ms]'
+			}
+		>
+			{typeof children === 'function' ? children() : children}
+		</div>
+	)
+}
+
 export function getErrorMessage(error: unknown) {
 	if (typeof error === 'string') return error
 	if (

tailwind.config.ts

@@ -25,6 +25,30 @@ export const marketingPreset = {
 				'slide-left': 'slide-left 0.3s ease-out',
 				'slide-top': 'slide-top 0.3s ease-out',
 			},
+			appear: {
+				"0%, 99%": {
+					height: "0",
+					width: "0",
+					opacity: "0",
+				},
+				"100%": {
+					height: "auto",
+					width: "auto",
+					opacity: "1",
+				},
+			},
+			disappear: {
+				"0%, 99%": {
+					height: "auto",
+					width: "auto",
+					opacity: "1",
+				},
+				"100%": {
+					height: "0",
+					width: "0",
+					opacity: "0",
+				},
+			},
 		},
 	},
 } satisfies Omit<Config, 'content'>