Pre render LandingPage for SEO

src/components/LandingPage/components/ProgressiveImage/ProgressiveImage.tsx

@@ -36,7 +36,7 @@ export default function ProgressiveImage({
     >
       <Image
         className={classNames(styles.image, loaded && styles.show)}
-        onLoadingComplete={() => {
+        onLoad={() => {
           setLoaded(true);
         }}
         src={src}

src/components/LandingPage/layout/Hero/Hero.tsx

@@ -28,6 +28,7 @@ export default function Hero({ className, section }: HeroProps) {
     content,
     next,
   } = useSanityContentForHero(section);
+
   const [videoReady, setVideoReady] = React.useState(false);
   const height = useFullHeight();
   return (

src/components/LandingPage/utils.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { EnumSection } from './sections/sections';
 import { DEFAULT_SECTION, ID_MENU, Section, SECTIONS } from './constants';
-import { basePath } from '@/config';
+import { basePath, isServer } from '@/config';
 import { isString } from '@/util/type-guards';
 
 /**
@@ -35,9 +35,9 @@ export function gotoSection(slugOrIndex: string | EnumSection) {
   window.location.href = url;
 }
 
-export function useResizeObserver(callback: ResizeObserverCallback): ResizeObserver {
+export function useResizeObserver(callback: ResizeObserverCallback): ResizeObserver | null {
   const ref = React.useRef<ResizeObserver | null>(null);
-  if (!ref.current) ref.current = new ResizeObserver(callback);
+  if (!ref.current && !isServer) ref.current = new ResizeObserver(callback);
   return ref.current;
 }
 
@@ -51,6 +51,7 @@ export function useMenuHeight(): number {
   }, [setMenuHeight]);
   const observer = useResizeObserver(handleResize);
   React.useEffect(() => {
+    if (!observer) return;
     observer.observe(document.body);
     return () => observer.unobserve(document.body);
   }, [observer]);

src/components/explore-section/common/pdf/PDFViewerContainer.tsx

@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic';
 import { useRef, useState } from 'react';
-import { ConfigProvider, Button } from 'antd';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { ConfigProvider } from 'antd';
+
 import { AnalysisType, analysisTypes, typeLabel } from './types';
 
 const DynamicPDFViewer = dynamic(() => import('./PDFViewer'), {
@@ -22,27 +22,6 @@ export function PDFViewerContainer({ distributions }: Props) {
   const currentDistributions = distributions.filter((d) => matchesType(d, type));
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [scrollPosition, setScrollPosition] = useState(0);
-
-  const onScroll = () => {
-    setScrollPosition(scrollContainerRef.current?.scrollLeft || 0);
-  };
-
-  const scroll = (scrollOffset: number) => {
-    scrollContainerRef.current?.scrollBy({
-      top: 0,
-      left: scrollOffset,
-      behavior: 'smooth',
-    });
-  };
-
-  const canScrollLeft = type === 'all' && scrollPosition > 0;
-  const canScrollRight =
-    type === 'all' &&
-    scrollPosition <
-      (scrollContainerRef.current?.scrollWidth ?? 0) -
-        (scrollContainerRef.current?.clientWidth ?? 0) -
-        5;
 
   return (
     <div className="w-full">
@@ -73,23 +52,6 @@ export function PDFViewerContainer({ distributions }: Props) {
             ))}
           </div>
 
-          {(canScrollLeft || canScrollRight) && (
-            <div className="flex gap-2">
-              <Button
-                type="text"
-                icon={<LeftOutlined className={!canScrollLeft ? 'text-neutral-4' : ''} />}
-                disabled={!canScrollLeft}
-                onClick={() => scroll(-300)}
-              />
-              <Button
-                type="text"
-                icon={<RightOutlined className={!canScrollRight ? 'text-neutral-4' : ''} />}
-                disabled={!canScrollRight}
-                onClick={() => scroll(300)}
-              />
-            </div>
-          )}
-
           {/* <Link
             className="flex items-center gap-2 text-primary-9"
             href="/simulate/experiment-analysis?targetEntity=EModel"
@@ -102,7 +64,7 @@ export function PDFViewerContainer({ distributions }: Props) {
           </Link> */}
         </div>
 
-        <div ref={scrollContainerRef} onScroll={onScroll} className="w-full overflow-x-auto">
+        <div ref={scrollContainerRef} className="w-full overflow-x-auto">
           <div className="flex gap-x-16" style={{ minWidth: 'min-content' }}>
             <div style={{ minWidth: '30%', flexGrow: 1 }}>
               {currentDistributions.map((d) => {

src/services/sanity/sanity.ts

@@ -1,6 +1,8 @@
 /* eslint-disable no-console */
-import React from 'react';
+
 import { createClient } from 'next-sanity';
+import { atom, useAtomValue } from 'jotai';
+import { atomFamily } from 'jotai/utils';
 import { isUndefined } from '@/util/type-guards';
 import { logError } from '@/util/logger';
 
@@ -12,26 +14,29 @@ export const client = createClient({
   useCdn: process.env.NODE_ENV === 'production',
 });
 
+const dataFamily = atomFamily(
+  ({ query, typeGuard }: { query: string; typeGuard: (data: unknown) => data is unknown }) =>
+    atom(async () => {
+      try {
+        return fetchSanity(query, typeGuard);
+      } catch (ex) {
+        logError('There was an exception in this Sanity query:', query);
+        logError(ex);
+        return null;
+      }
+    }),
+
+  (a, b) => a.query === b.query
+);
+
 /**
  * @returns The expected object, or:
  *
  * - `undefined` if the query has not finished yet.
  * - `null` if an error occured.
  */
-export function useSanity<T>(
-  query: string,
-  typeGuard: (data: unknown) => data is T
-): T | undefined | null {
-  const [data, setData] = React.useState<T | undefined | null>(undefined);
-  React.useEffect(() => {
-    fetchSanity(query, typeGuard)
-      .then(setData)
-      .catch((ex) => {
-        logError('There was an exception in this Sanity query:', query);
-        logError(ex);
-        setData(null);
-      });
-  }, [query, typeGuard]);
+export function useSanity<T>(query: string, typeGuard: (data: unknown) => data is T) {
+  const data = useAtomValue(dataFamily({ query, typeGuard })) as T | undefined | null;
   return data;
 }