[BUG] Next 13 /app page transition bug / flash + scrollbar layout shift

Hi.

I have a code for NextJS page transition that was always working with /pages, but when I try to make this work with /app, there is a styling flash...

Version: "^10.13.0"

Basically there should be:

initial = opacity: 0
animate = opacity: 1

key={pathname}

but when I navigate between routes, there is instant initial opacity: 1 flash, then it disappear and animates again, every time with different delay etc. Even When I pass a huge delay to animate transition, there is still flash of opacity: 1

Something as below:

const Layout = ({ children }) => {

  const pathname = usePathname();

  return (
    <>
      <Navbar />
        <AnimatePresence initial={false} mode="wait" onExitComplete={() => window.scrollTo({ top: 0, left: 0, behavior: 'smooth'})}>
          <motion.div key={pathname} initial={{ opacity: 0 }} animate={{ opacity: 1, transition: { delay: 1 } }} exit={{ opacity: 0 }}>
            <AnimatePresence initial={true} mode="sync">
              <main id='main'>
                {children}
              </main>
            </AnimatePresence>
          </motion.div>
        </AnimatePresence>
      <PingComponent />
    </>
  )
}

export default Layout

Start with the provided Layout reproduction and compare the transition behavior between the /pages and /app routing setups. Verify navigation with AnimatePresence and motion.div using the pathname key, including the delayed animation and scroll handling; done means route changes no longer show an opacity flash or scrollbar-related layout shift.