[BUG] - Skeleton Animation Not Working

[ahmetenesdur]

NextUI Version

^2.4.2

Describe the bug

I'm having trouble getting the Skeleton animation to work. When I add the Skeleton component, the animation doesn't appear.

import { Card, Skeleton } from '@nextui-org/react';

    <Card className="w-[200px] space-y-5 p-4" radius="lg">
      <Skeleton className="rounded-lg" disableAnimation={false}>
        <div className="h-24 rounded-lg bg-default-300"></div>
      </Skeleton>
      <div className="space-y-3">
        <Skeleton className="w-3/5 rounded-lg" disableAnimation={false}>
          <div className="h-3 w-3/5 rounded-lg bg-default-200"></div>
        </Skeleton>
        <Skeleton className="w-4/5 rounded-lg" disableAnimation={false}>
          <div className="h-3 w-4/5 rounded-lg bg-default-200"></div>
        </Skeleton>
        <Skeleton className="w-2/5 rounded-lg" disableAnimation={false}>
          <div className="h-3 w-2/5 rounded-lg bg-default-300"></div>
        </Skeleton>
      </div>
    </Card>

Next.js: 14.2.5 (App Router) Framer Motion: ^11.3.2 Browser: Brave Version 1.67.123 Chromium: 126.0.6478.126 (Official Build) (arm64)

Steps to Reproduce the Bug or Issue

1. Create a new Next.js project with App Router.
2. Install NextUI and framer-motion dependencies.
3. Add the Skeleton component as shown in the code upper.
4. Observe that the Skeleton animation does not appear.

Expected behavior

As a user, I expected the Skeleton component to show a loading animation.

Screenshots or Videos

https://github.com/user-attachments/assets/9b7d56fa-228d-438d-a72e-ca7c00c9ad8e

Operating System Version

OS: macOS 14.5 (Apple M3 Pro)

Browser

Other (add additonal context)

[linear[bot]]

ENG-1139 [BUG] - Skeleton Animation Not Working

[awesome-pro]

@ahmetenesdur I used the same code but I could not reproduce the bug. Kindly provide some Minimal reproducible Enviroment like CodeSandBox or StackBlitz

[ahmetenesdur]

Hi @abhinandan-verma,

While preparing a CodeSandbox, I found the issue in my setup. It was related to the backgroundImage setting in my tailwind.config.js. I moved the backgroundImage configuration to styles/globals.css and that resolved the problem.

Here are the changes I made:

tailwind.config.js:

import { nextui } from "@nextui-org/theme";

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        // Removed backgroundImage setting
        // backgroundImage: {
        //  "brand-pattern":
        //      "url('/img/background-pattern.svg'), linear-gradient(90deg, rgb(17, 178, 186) 0%, rgb(17, 178, 186) 100%)",
        // },
    },
    darkMode: "class",
    plugins: [nextui()],
};

styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .brand-pattern {
        background-image: url("/img/background-pattern.svg"),
            linear-gradient(90deg, rgb(17, 178, 186) 0%, rgb(17, 178, 186) 100%);
    }
}

Thanks for your assistance and sorry for the confusion!