The following describes the process that occurs when a user loads a Clay page in their browser:

SiteLayout

We have configured Gatsby to wrap the entire website within a specific component: SiteLayout, which is defined in src/layout/SiteLayout.tsx.

This component represents the UI elements that are shared across all Clay pages:

• The header
• The footer
• Popup components such as the cart, signin/signup dialog

Thanks to the Gatsby configuration, this component persists through page transitions. However, with every new page (i.e., a different path), the SiteLayout calls the onPageLoad function from React's useEffect.

onPageLoad

The onPageLoad function, defined in src/utils/onPageLoad.ts, primarily configures and loads the "core" async module from state/async/core.ts. It also alerts the analytics module about the page load event.