Slide often missing on large screen

[DhaniAM]

So here's what happen:

• When I first load the page, the slide works
• Then I route to different page, then route back to it, the slide disappear. But when I resize the screen, the slide shows again.
• I have check the html and it shows that there's a div with class="images-wrap horizontal". When the slide disappear, the width is around 3000px, but when the slide appear after I resize the screen, it becomes more than 30000px.
• On small screen, this issue is not happening.
• The slide is almost always missing, but not always. It works when the page first load but not after reroute to that page
• It works normal when I use Next.js v12, but after I migrate to v13, this issue starts to happen
• My package: "next": "^13.5.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-slideshow-image": "^4.3.0", "tailwindcss-children": "^2.1.0", "tailwindcss": "^3.3.3",

*Update: If I set infinite to false, then I can see the Slide content but it's not full width. The left & right arrows are in the right place, but the contents are not. After I resize screen, then it'll become full width. If I set infinite to true, then I can't see the Slide content at all like I said before.

Here's my code

const KategoriPilihanItem = (props: KategoriPilihanItemType) => {
    <ul className='hidden lg:block'>
        <Slide
            autoplay={false}
            easing={'ease'}
            infinite={true}
            slidesToShow={8}
            slidesToScroll={3}
        >
            <KategoriPilihanItem key={"semua"} id={"semua"} kategori='Lihat Semua'/>
            {Boolean(kategoriList) && kategoriList.map((item: any, idx: number) => {
                return (
                <KategoriPilihanItem
                    kategori={item.nama}
                    key={idx}
                    id={item.id}
                />
                )
            })}
        </Slide>
    </ul>
}

const KategoriPilihanItem = (props: KategoriPilihanItemType) => {
    const router: NextRouter = useRouter()

    const onClick = (_: any): void => {
        void router.push(`/produk/kategori/${props.id}`)
    }
    const kategori = props.kategori
    const kategoriIcon = kategori?.toLowerCase()
    .replace(/ & /g, '  -')
    .replace(/ /g, '-')
    .replace(/\//g, '-')

    return (
        <li
        onClick={onClick}
        className='flex cursor-pointer flex-grow flex-col flex-nowrap items-center
            transition-all hover:-mt-2 hover:mb-2 py-2 mr-3 lg:mr-0 h-full hover:bg-borneo-green-lighten2'>
        <div>
                <Image
                    id={props.id}
                    src={`/kategori/${kategoriIcon}.svg`}
                    alt={kategori}
                    className='object-contain w-11 h-11 lg:w-12 lg:h-12 xl:w-16 xl:h-16'
                    width={10}
                    height={10}
                />
        </div>
        <div
                id={props.id}
                className='text-11px text-borneo-purple w-20 text-center lg:w-24'>
                {kategori}
        </div>
        </li>
    )
}

[femioladeji]

thanks for raising this issue. We'll look into it and get back to you

[DhaniAM]

I just change my initial useState from [ ] into null and somehow this issue is gone. I don't understand why but it works.

from:

const [kategoriList, setKategoriList] = useState<Array<any>>([])

// inside KategoriPilihan component contain the Slide component
{kategoriList ? <KategoriPilihan data={kategoriList}/> : <Loading/>}

change into:

const [kategoriList, setKategoriList] = useState<any>(null)

// inside KategoriPilihan component contain the Slide component
{kategoriList ? <KategoriPilihan data={kategoriList}/> : <Loading/>}