> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/above-the-fold/sample-flows.md

## Article Content:

# Above the Fold API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Prioritize images above the fold

To prioritize images above the fold, follow these steps:

1. Check whether the image's component is above the fold. Specify the component's ID. A component that isn't marked returns `undefined`, which counts as not above the fold:

   ```ts
   const isAboveTheFold = aboveTheFoldService.isInFirstFold(id)
   ```

2. Choose how the browser loads the image. Load it right away with high priority when it's above the fold, and lazily otherwise:

   ```ts
   const loading = isAboveTheFold ? 'eager' : 'lazy'
   const fetchPriority = isAboveTheFold ? 'high' : 'auto'
   ```

3. Render the image with both attributes:

   ```tsx
   return <img id={id} src={src} alt={alt} loading={loading} fetchPriority={fetchPriority} />
   ```

## Defer a heavy component below the fold

To defer a heavy component below the fold, follow these steps:

1. Check whether the component is above the fold, and use the result as the initial state. This value doesn't change for the lifetime of the page, so there's no need to check it again. Also create a ref for the placeholder:

   ```tsx
   const placeholderRef = useRef<HTMLDivElement>(null)
   const [showContent, setShowContent] = useState(() => aboveTheFoldService.isInFirstFold(id))
   ```

2. In an effect, use an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) to watch the placeholder that step 3 renders. When the placeholder scrolls into view, stop watching and show the full component:

   ```tsx
   useEffect(() => {
       if (showContent || !placeholderRef.current) {
           return
       }
       const observer = new IntersectionObserver(([entry]) => {
           if (entry.isIntersecting) {
               observer.disconnect()
               setShowContent(true)
           }
       })
       observer.observe(placeholderRef.current)
       return () => observer.disconnect()
   }, [showContent])
   ```

3. When `showContent` is `false`, render a placeholder with the same size as the full component, so the page doesn't shift when the full component replaces it:

   ```tsx
   if (!showContent) {
       return <div ref={placeholderRef} style={{ height: 480 }} />
   }
   ```

4. When `showContent` is `true`, render the full component:

   ```tsx
   return <ReviewsWidget productId="spring-jacket" />
   ```