Merge pull request #15819 from ethereum/optimize-values-marquee

Optimize values marquee

Author: wackerow

app/[locale]/page.tsx

@@ -33,6 +33,7 @@ import Twitter from "@/components/icons/twitter.svg"
 import Whitepaper from "@/components/icons/whitepaper.svg"
 import { Image } from "@/components/Image"
 import CardImage from "@/components/Image/CardImage"
+import IntersectionObserverReveal from "@/components/IntersectionObserverReveal"
 import MainArticle from "@/components/MainArticle"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import SvgButtonLink, {
@@ -624,14 +625,16 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
           </SectionContent>
 
           {/* dynamic / lazy loaded */}
-          <ValuesMarquee
-            pairings={valuesPairings}
-            eventCategory={eventCategory}
-            categoryLabels={{
-              ethereum: tCommon("ethereum"),
-              legacy: t("page-index-values-legacy"),
-            }}
-          />
+          <IntersectionObserverReveal rootMargin="-50% 0px 0px 0px">
+            <ValuesMarquee
+              pairings={valuesPairings}
+              eventCategory={eventCategory}
+              categoryLabels={{
+                ethereum: tCommon("ethereum"),
+                legacy: t("page-index-values-legacy"),
+              }}
+            />
+          </IntersectionObserverReveal>
         </Section>
 
         {/* Builders - Blockchain's biggest builder community */}

src/components/IntersectionObserverReveal.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { ReactNode, useState } from "react"
+import { useIntersectionObserver } from "usehooks-ts"
+
+import { cn } from "@/lib/utils/cn"
+
+interface IntersectionObserverRevealProps {
+  children: ReactNode
+  threshold?: number
+  className?: string
+  rootMargin?: string
+}
+
+const IntersectionObserverReveal = ({
+  children,
+  threshold = 0,
+  className,
+  rootMargin,
+}: IntersectionObserverRevealProps) => {
+  const { ref, isIntersecting } = useIntersectionObserver({
+    threshold,
+    root: null,
+    rootMargin,
+  })
+
+  // once the element is visible, set a flag to prevent the element from being hidden again
+  const [hasBeenVisible, setHasBeenVisible] = useState(false)
+
+  if (isIntersecting && !hasBeenVisible) {
+    setHasBeenVisible(true)
+  }
+
+  return (
+    <div ref={ref} className={cn("w-full", className)}>
+      {(isIntersecting || hasBeenVisible) && (
+        <div
+          className={cn(
+            "transition-opacity duration-700",
+            isIntersecting || hasBeenVisible ? "opacity-100" : "opacity-0"
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default IntersectionObserverReveal