swiper/react problem in ssr mode

[matin-mortazavi]

Check that this is really a bug

• I confirm

Reproduction link

hhtps://i-provide-code-in-description

Bug description

hi guys i’ve a problem with swiper/react package in ssr mode

i got an parent component that fetch data and pass it to a component
the child component show product in slider but problem is in first 0.5 second of first renedr all styles are messed up (in csr work well)
have you any idea how to handle it?! i think the problem related to slow loading of react-swiper

my parent component =>

export default async function Home() {
 const { data, categoryBox } = await coreUseCase.getBaseData();
 const {
     topCenterSlider,
    } = data;
 return (
   <div className={styles.home}>
     <TopSlider list={topCenterSlider} />
</div>  

my child component =>

import { SwiperSlide } from "swiper/react";
import { NextLink } from "@/components/Common";
import { Btn, Slider } from "@/components/Common";
import styles from "./TopSlider.module.scss";
import { Img } from "@/components/Common";
import { coreConstant } from "@/constant";
const sliderSettings = {
  navigation: false,
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
};

export default function TopSlider({ list }) {
  return (
    <div className={styles["top-slider"]}>
      <Slider settings={sliderSettings}>
        {list
          ?.filter((fil) => fil?.isEnable)
          ?.map((item, key) => (
            <SwiperSlide key={key}>
                           <figure className={styles["top-slider__img"]}>
                  <Img alt={item?.title} path={item?.image} category={coreConstant.Sliders} />
                </figure>
                <div className={styles["top-slider__details"]}>
                  <p className={styles["top-slider__details-text"]}>{item?.metaTitle}</p>
                </div>
                       </SwiperSlide>
          ))}
      </Slider>
    </div>
  );
}

my slider component =>

import { Swiper } from "swiper/react";
import { Navigation, Pagination, Scrollbar, A11y, Keyboard, Thumbs, Autoplay } from "swiper/modules";

import "swiper/css/bundle";
import "swiper/css";

const Slider = ({ settings, children }) => {
  const settingConfigs = {
    modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard, Thumbs, Autoplay],
    pagination: { clickable: true },
    navigation: true,
    loop: true,
    ...settings,
  };

  return <Swiper {...settingConfigs}>{children}</Swiper>;
};

export default Slider;

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11.0.4

Platform/Target and Browser Versions

chorome

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