Layout issue when pushing a route in Next.js

Issues
1

i have a layout issue when pushing a route

2

the header shows fine, but when the router pushes to the next route, the header is blank

Screen Shot 2021-09-20 at 12.45.53 PM.png
Screen Shot 2021-09-20 at 12.45.53 PM.png4418×1740 350 KB

Screen Shot 2021-09-20 at 12.45.59 PM.png
Screen Shot 2021-09-20 at 12.45.59 PM.png4446×2032 298 KB

3

i’m using a next.js layout

4

here’s my code for the layout:

5 
// import { PLASMIC } from '../../plasmic-init'
// import { PlasmicRootProvider} from '@plasmicapp/loader-nextjs'
import React, { useEffect, useState } from "react"
import { useRouter } from "next/router"
import useTransformValue from '../../hooks/useTransformValue'
import Hud from '../../components/Hud'
import MainSidebar from "../../components/MainSidebar"
import Head from 'next/head'

const Layout = ({ children }) => {
  const router = useRouter()
  const [showTransition, setShowTransition] = useState(false)
  const [fading, setFading] = useState("")
  const [transitionVideoSRC, setTransitionVideoSRC] = useState("<https://twcdn.s3.us-west-2.amazonaws.com/cedar/assets/videos/entrancestage.mp4>")
  const transformValue = useTransformValue()
  const [showSidebarState, setShowSidebarState] = useState("hidden")
  function test(e) {
    // console.log("test: ", e)
    // if(router.pathname === "/home" && e === "/main") {
    setTransitionVideoSRC("<https://twcdn.s3.us-west-2.amazonaws.com/cedar/assets/videos/entrancestage.mp4>")
    setShowTransition(true)
    setFading("fade-in")
    // } else {
    //   setShowTransition(false)
    // }
  }
  useEffect(() => {
    const routeChangeStart = (e) => {
      console.log("routeChangeStart: ", e)
      console.log(router.pathname)
      // if(router.pathname === "/home" && e === "/main") {
      //   setTransitionVideoSRC("<https://twcdn.s3.us-west-2.amazonaws.com/cedar/assets/videos/entrancestage.mp4>")
      //   setShowTransition(true)
      //   setFading("fade-in")
      // } else {
      //   setShowTransition(false)
      // }
    }
    const routeChangeComplete = (e) => {
      console.log("routeChangeComplete: ", e)
    }
    const routeChangeError = (e) => {
      console.log("routeChangeError: ", e)
    }
    const beforeHistoryChange = (e) => {
      console.log("beforeHistoryChange", e)
    }
    const hashChangeStart = (e) => {
      console.log("hashChangeStart", e)
    }

    router.events.on('routeChangeStart', routeChangeStart)
    router.events.on('routeChangeComplete', routeChangeComplete)
    router.events.on('routeChangeError', routeChangeError)
    router.events.on('beforeHistoryChange', beforeHistoryChange)
    router.events.on('hashChangeStart', hashChangeStart)

    return () => {
      router.events.off('routeChangeStart', routeChangeStart)
      router.events.off('routeChangeComplete', routeChangeComplete)
      router.events.off('routeChangeError', routeChangeError)
      router.events.off('hashChangeStart', hashChangeStart)
    }
  }, [router])

  function hudSectionPressed(e) {
    setShowSidebarState(e)
  }
  function hudSidebarClosePressed() {
    setShowSidebarState("hidden")
  }

  return (
    <div className="layout">
      <Head>
        <link rel="preload" href="<https://twcdn.s3.us-west-2.amazonaws.com/cedar/assets/videos/entrancestage.mp4>" as="video" />
      </Head>
      <div className="header">
        <Hud hudSectionPressed={hudSectionPressed} />
        <MainSidebar state={showSidebarState} hudSidebarClosePressed={hudSidebarClosePressed} />
      </div>
      {showTransition ?
        <div className="transitionContainer">
          <div className="videoContainer">
            <video
              onAnimationEnd={() => {
                if (fading === "fade-out") {
                  setShowTransition(false)
                }

              }}
              onEnded={() => {
                if (fading === "fade-in") {
                  setFading("fade-out")
                }
              }} className={`videoTransition ${fading}`} autoPlay muted src={transitionVideoSRC} />
          </div>
        </div>

        : null}
      <div className="meatContainer">
        <div className="meat">
          {React.Children.map(children, child => (
            React.cloneElement(child, { showTransition: showTransition, test: test })
          ))}
        </div>
      </div>

    </div>
  )
}
export default Layout
6

i’m rendering (which contains the header) outside the router because it needs to persist in between route changes

7

you can try this out here: https://cedar.vercel.app/home (click in “main stage” on the bottom, disregard the flawed video)

8

the route push is delayed by 1 second, so that’s why you see the header go blank 1 second after clicking

9

plasmic ID: dqrDa2vAu4Y4gxvh2NoZGS

10

It looks like you’re ending up with multiple <PlasmicRootProvider /> on the page… where is <PlasmicRootProvider/> in the tree relative this Layout?

11

yeah i do have multiple PlasmicRootProviders. there’s one in , another in and in “children”. do you recommend putting one PlasmicRootProvider at the root of the ?

12

yeah; PlasmicRootProvider coordinates and provides the styles etc needed by all its descendant PlasmicComponents; currently it doesn’t know if other PlasmicRootProviders also exist, and they may end up overwriting each other’s styles (which is what’s happening). Is it possible to have just one?

13

let me try doing that. thanks.