refactor: ParallaxImage lazy loading

Author: wackerow

src/components/Image/ParallaxImage.tsx renamed to src/components/Image/ParallaxImage/client.tsx

@@ -5,6 +5,8 @@ import { ImageProps as NextImageProps } from "next/image"
 
 import { Image } from "@/components/Image"
 
+import { cn } from "@/lib/utils/cn"
+
 import { useEventListener } from "@/hooks/useEventListener"
 import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"
 
@@ -28,7 +30,14 @@ const ParallaxImage = ({ src, alt, className }: ParallaxImageProps) => {
   }
   const style = prefersReducedMotion ? {} : transform
 
-  return <Image src={src} alt={alt} className={className} style={style} />
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      className={cn("animate-fade-in", className)}
+      style={style}
+    />
+  )
 }
 
 export default ParallaxImage

src/components/Image/ParallaxImage/loading.tsx

@@ -0,0 +1,9 @@
+import { Spinner } from "@/components/ui/spinner"
+
+const Loading = () => (
+  <div className="absolute inset-0 grid animate-pulse-light place-items-center">
+    <Spinner className="text-6xl text-accent-b" />
+  </div>
+)
+
+export default Loading

src/components/Image/ParallaxImage/server.tsx

@@ -0,0 +1,8 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("./client"), {
+  ssr: false,
+  loading: Loading,
+})