Overlay flashes or blinks

[LemarCanete]

I am using next JS and it keeps flashing after clicking next. Also, how can I make it smoother? Maybe add a little delay to it after clicking next

video.mp4

Here is my code:

'use client'
import React, { useEffect, useState, useRef } from 'react'
import Joyride from 'react-joyride';

const Tour = () => {
const [registered, setRegistered] = useState(false)
const steps = [
{
target: '.Dashboard',
title: "Dashboard",
content: 'The dashboard page',
disableBeacon: true,
},
{
target: '.Teams',
title: "Teams",
content: 'The first thing you need to add is your team',
},
{
target: '.Projects',
title: "Projects",
content: 'You can find your team projects and add your projects',

    },
    {
        target: '.Gantt',
        title: "Gantt",
        content: 'View Tasks with projects with your gannt chart',
    },
    {
        target: '.Tasks',
        title: "Tasks",
        content: 'View All Tasks of your projects',
    },
    {
        target: '.Files',
        title: "Files",
        content: 'View All Files of your projects',
    },
    {
        target: '.Reports',
        title: "Reports",
        content: 'View All Reports of your projects',
    },
];

useEffect(()=>{
    setRegistered(true)
}, [])

return (
    <div className='tour-component'>
        {typeof window !== 'undefined' && registered && (
            <Joyride
            steps={steps}
            continuous={true}
            showProgress={true}
            showSkipButton={true}
            scrollOffset={10}
            hideCloseButton={true}
            />
        )}
    </div>
)

}

export default Tour

[gilbarbara]

Please provide a https://codesandbox.io/ demo or similar with a minimal reproducible example

[gilbarbara]

I've refactored how the Overlay is rendered to prevent any flickering.
It's available in v2.8.0

[kdevay]

Thanks so much! This fix happened just in time for me to not sink several hours into debugging 🥲