Next.js Discord

Discord Forum

Prevent layout shift

Unanswered
davdixyz posted this in #help-forum
Open in Discord
davdixyzOP
Any idea how can i fix this layout shift? With the pages router worked fine, but with the app router its just keep flashing.

page.tsx
import { getSeasonAnime } from "...";
import SplideC from "@/components/homepage/SplideC";
export default async function Index() {
  const currentSeason = await getSeasonAnime("CURRENT");
  return (
    <>
      <SplideC season={currentSeason} />
      <SplideC season={currentSeason} />
    </>  
  )
}


SplideC.tsx
"use client";
import React from "react";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import { SeasonResponse } from "...";
import { LazyImage } from "../shared/LazyImage";

interface SplideProps {
  season: SeasonResponse;
}
const SplideC: React.FC<SplideProps> = ({ season }) => {
  return (
    <>
      <p className="text-xl">some text</p>
      <Splide options={{ perPage: 8, gap: "1rem", pagination: false }}>
        {season.media.map((media, index) => (
          <SplideSlide key={index} className="w-full">
            <LazyImage
              src={media.coverImage.extraLarge}
              className="aspect-[2/3]"
            />
          </SplideSlide>
        ))}
      </Splide>
    </>
  );
};

export default SplideC;

6 Replies

Blanc de Hotot
Add a background-color to your LazyImage-component
Like this?
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skeleton Loading Animation</title>
    <style>
        /* Replace these values with your desired dimensions */
        .loading {
            width: 200px;
            height: 20px;
            background: linear-gradient(90deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.6) 50%, rgba(204, 204, 204, 0) 100%);
            background-size: 200% 200%;
            animation: shimmer 1s infinite;
        }

        @keyframes shimmer {
            0% {
                background-position: 100% 0;
            }

            100% {
                background-position: -100% 0;
            }
        }

        /* Optional: Center the skeleton loading animation */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- Skeleton loading animation -->
    <img class="loading"></img>
</body>

</html>
davdixyzOP
I already added a skeleton in the LazyImage component
The issue is Splide needs a time to initialize and then renders the content
Blanc de Hotot
@davdixyz
Have you tryed using suspence?
https://blog.logrocket.com/create-loading-component-next-js-13-react-suspense/