Add useEffect and state to conditionally render footer width/logo #1640
Conversation
Gatsby Cloud Build Reportdeveloper-website-feature/o11y-packs 🎉 Your build was successful! See the Deploy preview here. Build Details🕐 Build time: 3m |
|
I think this ok for GA, and we can look improving it post GA, or waiting until we move to a stand alone Gastby site for I/O which should resolve it I believe. |
| const [logo, setLogo] = useState(developerLogo); | ||
|
|
||
| useEffect(() => { | ||
| if (window.location.pathname.includes('instant-observability')) { |
There was a problem hiding this comment.
We might also want to check if window exists so that this doesn't yell at us at build time.
There was a problem hiding this comment.
i believe window is always available in useEffect because it only runs after the render and not server side, but we could put a check in there for extra safety!
| if (window.location.pathname === '/instant-observability/') { | ||
| setSidebarWidth(300); | ||
| } else setSidebarWidth(0); | ||
| }, [children]); |
There was a problem hiding this comment.
Out of curiosity, do we need to add children to the dependency array? This might cause unnecessary calls to this function (whenever anything inside this component changes, this will get called).
There was a problem hiding this comment.
because this is in the layout it won't fire the effect again (it didn't seem) when switching to the details view since the layout doesn't change. using the children of the layout to determine if it fires was the only way i found to re-trigger it. very open to other solutions though! i just haven't found them 😭
|
🎉 This PR is included in version 1.57.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
this is a solution, not sure if it's the solution. because it's an SSR issue i wasn't sure of a solution that doesn't involve the developer icon flashing in the footer (but you would have to be scrolled to the bottom and refresh to see it), same with the footer width/icon in the details view (scroll to the bottom and refresh to see)