fix(Dataroom): lazy load Framer Motion's components on client-side

safe-global / safe-homepage

Safe homepage

https://safe.global

MIT License

5 stars 14 forks source link

fix(Dataroom): lazy load Framer Motion's components on client-side #436

Closed DiogoSoaress closed 2 months ago

DiogoSoaress commented 3 months ago

What it solves

Resolves #434

How this PR fixes it

Isolate components that make use of Framer Motion in a separate component. This component is lazy loaded with next/dynamic and skipping SSR to avoid any layout jumps in the browser

github-actions[bot] commented 3 months ago

Branch preview

✅ Deployed successfully in branch deployment:

https://dataroom_component_not_found--homepage.review.5afe.dev

DiogoSoaress commented 2 months ago

I identified the repetition of the Framer Motion hook to track the scroll progress but addressed the refactor in a different PR to keep this PR scope narrow

DiogoSoaress commented 2 months ago

The new refs aren't being forwarded - the relative children need to also be wrapped in forwardRef.

Framer’s Motion useScroll is expecting to receive a target?: RefObject$1<HTMLElement>; instead of a ForwardedRef<HTMLDivElement> so I don't think that change is necessary.