Get help on Discord

Sanity embedded studio popup overlay flashing on save in production (Vercel)

7 replies
Last updated: Mar 22, 2024
Hi y’all. I have a weird issue that’s only happening in production. I have an embedded studio inside a Next.js app hosted on Vercel. Whenever a field uses a popup overlay for input, like an array, the overlay flashes and reloads on every background save. I attached a couple videos showing what I am describing. The first video is the production version, the second is the same version running locally. It’s extremely annoying, and each time it reloads the focus resets, so if you happen to be typing when it happens your text gets messed up. Really hurting the overall usability of the studio. Anyone ever run into anything like this? I am using Sanity 3.35.0, Next 14.1, and next-sanity 8.4.5.
AI Update

Good news! This exact issue was reported and fixed back in March 2024. The problem you're experiencing with the overlay flashing and reloading on every autosave in production is a known bug that was resolved in a Sanity Studio release.

The solution is simple: upgrade your Sanity package.

You mentioned you're on Sanity 3.35.0, and the fix was released around March 22, 2024 (likely version 3.36.0 or later). The issue was specifically in the sanity package, not next-sanity.

Run:

npm install sanity@latest
# or
yarn add sanity@latest

Then redeploy to Vercel, and the flashing overlay issue should be resolved.

Why this happens: The problem occurs specifically in production environments (like Vercel) because of how the embedded Studio handles re-renders during autosave. In production builds, certain optimizations or caching behaviors can trigger unmounting/remounting of overlay components (like array inputs, reference selectors, etc.) when the document saves in the background. This causes the flash you're seeing and the frustrating focus loss.

The Sanity team addressed this in their release by improving how the Studio maintains component state during background saves, preventing those overlays from being unnecessarily torn down and rebuilt.

Your code setup looks fine - having the Studio in a client component with 'use client' and using NextStudio from next-sanity is the correct approach. The dynamic theme loading from themer.sanity.build is also a common pattern and shouldn't be causing this issue.

After upgrading, if you're still experiencing problems (unlikely), you might also want to update next-sanity to the latest version, but based on the community discussion I found, the fix was specifically in the core sanity package and resolved the issue completely for the original reporter.

Show original thread
7 replies
Can you share your code for the page that this is embedded in?
I have the studio embedded at app/[[…index]], here is that page.tsx file:
import {Studio} from './Studio'

// Ensures the Studio route is statically generated
export const dynamic = 'force-static'

// Set the right `viewport`, `robots` and `referer` meta tags
export {metadata} from 'next-sanity/studio/metadata'
export {viewport} from 'next-sanity/studio/viewport'

export default function StudioPage() {
  return <Studio />
}

And the Studio component that is imported:
'use client'

import {NextStudio} from 'next-sanity/studio'

import _config from '../../sanity.config'
import {useEffect, useState} from 'react'

export function Studio() {
  const [config, setConfig] = useState(_config)

  useEffect(
    // Start fetching the theme in parallel with the Studio auth loading
    () =>
      // The webpackIgnore tells webpack to not attempt bundling this dynamic import,
      // and instead let it run natively in the browser at runtime
      void import(/* webpackIgnore: true */ '<https://themer.sanity.build/api/hues?preset=dew').then(>
        ({theme}) => setConfig((config) => ({...config, theme})),
      ),
    [],
  )

  //  Supports the same props as `import {Studio} from 'sanity'`, `config` is required
  return <NextStudio config={config} />
}
I believe this got fixed in a release yesterday! Can you upgrade to see if it was addressed?
You bet! Is the fix in sanity or next-sanity?
Sanity!
That fixed it, thank you so much!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?