Swiper react virtual slides causing UI to blink when using Next.js 13 loading.tsx

[Yonisegev]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/hardcore-minsky-9s75k6

Bug description

In the repro above, I am using next 13.4 and swiper 9.1.1.
I am rendering a vertical swiper, where each slide is a full height video.
Also, I'm using the virtual slides module to improve performance as in my app I have a lot of video slides.

Now, I wanted to show a UI loader upon navigation to the page, so i'm utilizing the loading.tsx file to stream the loader.
The problem is, when using virtual slides, we see the loade (Loading...), and then a blank page is loaded (you can see the pink background without the video player) and a moment afterwards the UI with the video is loaded.

If you remove the virtual slides (remove lines 15&16 in TestPageWrapper.tsx), we get the expected behavior where we see the loader, it finishes fetching everything and we instantly see the video UI.

Example video:
https://streamable.com/1d9dmg

Expected Behavior

See the loader (Loading....)
Once the loader is gone, we instantly see UI with the video element.

Actual Behavior

We see the loader, once it finishes we see a screen without the video player, only the pink background, and then it re-renders with the video player.

Swiper version

9.1.1

Platform/Target and Browser Versions

Chrome, WebView, macOS, Windows

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[bartfluitsma]

@Yonisegev Did you find a solution for this? Experiencing the same problem.