feat: add slow-pulse variant to ui/skeleton

add new keyframe animations for slow-pulse and fade-in

Author: wackerow

src/components/ui/skeleton.tsx

@@ -1,3 +1,5 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
 import { cn } from "@/lib/utils/cn"
 
 import { Card, CardBanner, CardContent } from "../ui/card"
@@ -22,18 +24,27 @@ const widths = [
   "w-1/5",
 ]
 
-const Skeleton = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => {
+const skeletonVariants = cva(
+  "h-4 rounded bg-disabled opacity-5 dark:opacity-60",
+  {
+    variants: {
+      variant: {
+        pulse: "animate-pulse-light",
+        "slow-pulse": "animate-slow-pulse opacity-[0.01]",
+      },
+    },
+    defaultVariants: {
+      variant: "pulse",
+    },
+  }
+)
+
+type SkeletonProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof skeletonVariants>
+
+const Skeleton = ({ className, variant, ...props }: SkeletonProps) => {
   return (
-    <div
-      className={cn(
-        "h-4 animate-pulse-light rounded bg-disabled opacity-5 dark:opacity-60",
-        className
-      )}
-      {...props}
-    />
+    <div className={cn(skeletonVariants({ variant }), className)} {...props} />
   )
 }
 

tailwind.config.ts

@@ -301,6 +301,14 @@ const config = {
         "pulse-light": {
           "50%": { opacity: "0.2" },
         },
+        "slow-pulse": {
+          "70%": { opacity: "0" },
+          "85%": { opacity: "0.2" },
+        },
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
@@ -316,6 +324,8 @@ const config = {
         "spin-9": "spin 18s linear infinite",
         "counter-spin-9": "spin 18s linear infinite reverse",
         "pulse-light": "pulse-light 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        "slow-pulse": "slow-pulse 4s linear infinite",
+        "fade-in": "fade-in 150ms ease-in-out",
       },
       // Add custom border-radius tailwinds extension for "4xl" as "2rem"
       borderRadius: {