revert: slow-pulse

Author: wackerow

src/components/Nav/Client/index.tsx

@@ -23,18 +23,14 @@ const Menu = dynamic(() => import("../Menu"), {
   loading: () => (
     <div className="me-8 flex w-full items-center gap-10 px-6 max-md:hidden">
       {Array.from({ length: 5 }).map((_, i) => (
-        <Skeleton variant="slow-pulse" key={i} className="h-6 w-12 py-2" />
+        <Skeleton key={i} className="h-6 w-12 py-2" />
       ))}
     </div>
   ),
 })
 
 const MobileMenuLoading = () => (
-  <Skeleton
-    variant="slow-pulse"
-    data-label="mobile-menu"
-    className="ms-2 size-6"
-  />
+  <Skeleton data-label="mobile-menu" className="ms-2 size-6" />
 )
 
 const MobileNavMenu = dynamic(() => import("../Mobile"), {
@@ -48,22 +44,13 @@ const SearchProvider = dynamic(() => import("../../Search"), {
     <>
       <div className="flex items-center gap-6 px-2 max-md:hidden xl:px-3">
         <Skeleton
-          variant="slow-pulse"
           data-label="search-xl"
           className="hidden h-6 w-[169px] xl:flex"
         />
-        <Skeleton
-          variant="slow-pulse"
-          data-label="search"
-          className="size-6 xl:hidden"
-        />
+        <Skeleton data-label="search" className="size-6 xl:hidden" />
       </div>
       <div className="flex items-center md:hidden">
-        <Skeleton
-          variant="slow-pulse"
-          data-label="search"
-          className="mx-2 size-6"
-        />
+        <Skeleton data-label="search" className="mx-2 size-6" />
         <MobileMenuLoading />
       </div>
     </>
@@ -74,10 +61,7 @@ const LanguagePicker = dynamic(() => import("../../LanguagePicker"), {
   ssr: false,
   loading: () => (
     // LG skeleton width approximates English "[icon] Languages EN" text width
-    <Skeleton
-      variant="slow-pulse"
-      className="h-6 max-md:hidden md:mx-2 md:w-[54px] lg:mx-3 lg:w-[8.875rem]"
-    />
+    <Skeleton className="h-6 max-md:hidden md:mx-2 md:w-[54px] lg:mx-3 lg:w-[8.875rem]" />
   ),
 })
 
@@ -97,7 +81,7 @@ const ClientSideNav = () => {
     <>
       {desktopScreen && (
         <Menu
-          className="animate-fade-in max-md:hidden"
+          className="animate-fade-in- animate-fade-in- max-md:hidden"
           sections={linkSections}
         />
       )}

src/components/ui/skeleton.tsx

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

tailwind.config.ts

@@ -301,10 +301,6 @@ 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" },
@@ -324,7 +320,6 @@ 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"