feat(ktl-4093): implement smooth scrolling to anchor elements on masonry layout ready

Author: berezinant

blocks/case-studies/grid/case-studies-grid.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import cn from 'classnames';
 import { CaseStudyCard, CaseStudyCardProps } from '../card/case-studies-card';
 import { useFilteredCases } from '../filter/use-filtered-cases';
@@ -7,6 +7,7 @@ import { EmptyState } from '../../../components/empty-state/empry-state';
 import { ThemeProvider } from '@rescui/ui-contexts';
 
 import styles from './case-studies-grid.module.css';
+import { useDeferredAnchorScroll } from '../../../hooks/useDeferredAnchorScroll';
 
 export type CaseStudiesGridProps = {
     className?: string;
@@ -23,6 +24,9 @@ export const CaseStudiesSection: FC<CaseStudiesGridProps> = ({ className, ...pro
 export const CaseStudiesGrid: FC<CaseStudiesGridProps> = ({ className, mode, showCopyLinkButton }) => {
     const cases = useFilteredCases();
     const theme = 'light';
+    const [isLayoutReady, setIsLayoutReady] = useState(false);
+
+    useDeferredAnchorScroll(isLayoutReady);
 
     return (
         <ThemeProvider theme={theme}>
@@ -38,6 +42,7 @@ export const CaseStudiesGrid: FC<CaseStudiesGridProps> = ({ className, mode, sho
                             <CaseStudyCard mode={mode} showCopyLinkButton={showCopyLinkButton} {...caseItem} />
                         )}
                         getKey={(caseItem) => caseItem.id}
+                        onLayoutReady={() => setIsLayoutReady(true)}
                     />
                 )}
             </div>

components/masonry-grid/masonry-grid.tsx

@@ -12,6 +12,7 @@ export interface MasonryGridProps<T> {
     columnClassName?: string;
     itemClassName?: string;
     mobileBreakpoint?: number;
+    onLayoutReady?: () => void;
 }
 
 export function MasonryGrid<T>({
@@ -24,6 +25,7 @@ export function MasonryGrid<T>({
     columnClassName,
     itemClassName,
     mobileBreakpoint = 808,
+    onLayoutReady
 }: MasonryGridProps<T>) {
     const [isMobile, setIsMobile] = useState(false);
 
@@ -107,6 +109,7 @@ export function MasonryGrid<T>({
             });
 
             setGreedyColumns(cols);
+            setTimeout(onLayoutReady, 0);
         }, 0);
 
         return () => window.clearTimeout(id);
@@ -145,7 +148,6 @@ export function MasonryGrid<T>({
                                     key={getKey(item, originalIndex)}
                                     className={cn(styles.item, itemClassName)}
                                 >
-                                    {/*<div style={{color: 'white'}}>{originalIndex}</div>*/}
                                     {renderItem(item, originalIndex)}
                                 </div>
                             );

hooks/useDeferredAnchorScroll.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+
+// Strip the hash early (module-level, runs before any render/scroll)
+// so the browser doesn't attempt its native scroll-to-anchor.
+const savedHash =
+    typeof window !== 'undefined' && window.location.hash ? window.location.hash : '';
+if (savedHash) {
+    history.replaceState(null, '', window.location.pathname + window.location.search);
+}
+
+/**
+ * Defers anchor scrolling until layout is ready.
+ *
+ * IMPORTANT: Importing this module strips the URL hash immediately
+ * to prevent the browser's native scroll-to-anchor behavior.
+ */
+export function useDeferredAnchorScroll(isLayoutReady: boolean) {
+    const hasScrolledToAnchor = useRef(false);
+
+    useEffect(() => {
+        if (!isLayoutReady) return;
+        if (hasScrolledToAnchor.current) return;
+        if (!savedHash) return;
+
+        // Restore the hash silently (without triggering the browser scroll)
+        history.replaceState(null, '', savedHash);
+        markTargetElement();
+        scrollToTargetElement();
+        hasScrolledToAnchor.current = true;
+    }, [isLayoutReady]);
+}
+
+function markTargetElement() {
+    const hash = window.location.hash;
+    if (!hash) return;
+
+    const elementId = hash.substring(1);
+    const targetElement = document.getElementById(elementId);
+    if (targetElement) {
+        targetElement.setAttribute('data-target', 'true');
+    }
+}
+
+function scrollToTargetElement() {
+    const hash = window.location.hash;
+    if (!hash) return;
+
+    const elementId = hash.substring(1);
+    const targetElement = document.getElementById(elementId);
+    if (targetElement) {
+        targetElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+        });
+    }
+}