From 26080eae3e29a12ed0dd226782947cf666e2ac6e Mon Sep 17 00:00:00 2001
From: Kevin <kevin@Kevins-MacBook-Pro.local>
Date: Thu, 6 Aug 2026 09:21:07 -0400
Subject: [PATCH 1/2] refactor: port loader components to cu-loader skeleton
 pattern

Standardize the remaining ad-hoc loaders (Calendar, Card, Description,
Event, Listing, Pagination) onto the shared cu-loader cu-loader--<variant>
cu-component-updated pattern used by the previously ported loaders.

WSDEV-6699

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 lib/components/Loaders/CalendarLoader/CalendarLoader.tsx      | 2 +-
 lib/components/Loaders/CardLoader/CardEventLoader.tsx         | 2 +-
 lib/components/Loaders/CardLoader/CardIconLoader.tsx          | 2 +-
 lib/components/Loaders/CardLoader/CardNewsLoader.tsx          | 2 +-
 lib/components/Loaders/CardLoader/CardPageLoader.tsx          | 2 +-
 lib/components/Loaders/CardLoader/CardPeopleLoader.tsx        | 2 +-
 lib/components/Loaders/CardLoader/CardVideoLoader.tsx         | 2 +-
 .../Loaders/DescriptionLoader/DescriptionLoader.tsx           | 2 +-
 lib/components/Loaders/EventLoader/EventLoader.tsx            | 4 ++--
 .../Loaders/ListingLoader/ListingDescriptionLoader.tsx        | 2 +-
 lib/components/Loaders/ListingLoader/ListingEventLoader.tsx   | 2 +-
 lib/components/Loaders/ListingLoader/ListingIconLoader.tsx    | 2 +-
 lib/components/Loaders/ListingLoader/ListingNewsLoader.tsx    | 2 +-
 lib/components/Loaders/ListingLoader/ListingPageLoader.tsx    | 2 +-
 lib/components/Loaders/ListingLoader/ListingPeopleLoader.tsx  | 2 +-
 lib/components/Loaders/PaginationLoader/PaginationLoader.tsx  | 2 +-
 16 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/lib/components/Loaders/CalendarLoader/CalendarLoader.tsx b/lib/components/Loaders/CalendarLoader/CalendarLoader.tsx
index 4637f3bab..8be5d7a58 100644
--- a/lib/components/Loaders/CalendarLoader/CalendarLoader.tsx
+++ b/lib/components/Loaders/CalendarLoader/CalendarLoader.tsx
@@ -28,7 +28,7 @@ export const CalendarLoader = ({ showClearButton }: CalendarLoaderProps) => {
 
   return (
     <>
-      <div className="animate-pulse">
+      <div className="cu-loader cu-loader--calendar cu-component-updated animate-pulse">
         <div className="cu-calendar cu-component-updated not-prose">
           <div className="flex items-center py-2 mb-6 bg-white border rounded-lg border-cu-black-100">
             <button type="button" className={`${styles.prevNextArrows}`}>
diff --git a/lib/components/Loaders/CardLoader/CardEventLoader.tsx b/lib/components/Loaders/CardLoader/CardEventLoader.tsx
index 7731a5b0c..7f60b2378 100644
--- a/lib/components/Loaders/CardLoader/CardEventLoader.tsx
+++ b/lib/components/Loaders/CardLoader/CardEventLoader.tsx
@@ -3,7 +3,7 @@ import { Card } from '../../Card/Card'
 export const CardEventLoader = () => {
   return (
     <Card>
-      <div className="animate-pulse">
+      <div className="cu-loader cu-loader--cardevent cu-component-updated animate-pulse">
         <span className="block w-full rounded-t-lg h-60 bg-cu-black-100"></span>
         <span className="z-10 flex flex-col items-center justify-center w-20 h-20 mx-6 mb-2 -mt-10 rounded-md bg-cu-black-50"></span>
         <div className="p-6 space-y-3">
diff --git a/lib/components/Loaders/CardLoader/CardIconLoader.tsx b/lib/components/Loaders/CardLoader/CardIconLoader.tsx
index 42783fc49..8e47b7774 100644
--- a/lib/components/Loaders/CardLoader/CardIconLoader.tsx
+++ b/lib/components/Loaders/CardLoader/CardIconLoader.tsx
@@ -3,7 +3,7 @@ import { Card } from '../../Card/Card'
 export const CardIconLoader = () => {
   return (
     <Card>
-      <div className="animate-pulse">
+      <div className="cu-loader cu-loader--cardicon cu-component-updated animate-pulse">
         <div className="p-6 space-y-3">
           <span className="block w-20 h-20 rounded-md bg-cu-black-100"></span>
           <span className="block h-8 rounded-md max-w-80 bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/CardLoader/CardNewsLoader.tsx b/lib/components/Loaders/CardLoader/CardNewsLoader.tsx
index 22006ed3c..c377a4f66 100644
--- a/lib/components/Loaders/CardLoader/CardNewsLoader.tsx
+++ b/lib/components/Loaders/CardLoader/CardNewsLoader.tsx
@@ -3,7 +3,7 @@ import { Card } from '../../Card/Card'
 export const CardNewsLoader = () => {
   return (
     <Card>
-      <div className="animate-pulse">
+      <div className="cu-loader cu-loader--cardnews cu-component-updated animate-pulse">
         <span className="block w-full rounded-t-lg h-60 bg-cu-black-100"></span>
         <div className="p-6 space-y-3">
           <span className="block h-4 rounded-md max-w-48 bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/CardLoader/CardPageLoader.tsx b/lib/components/Loaders/CardLoader/CardPageLoader.tsx
index d867c44db..068db6a96 100644
--- a/lib/components/Loaders/CardLoader/CardPageLoader.tsx
+++ b/lib/components/Loaders/CardLoader/CardPageLoader.tsx
@@ -3,7 +3,7 @@ import { Card } from '../../Card/Card'
 export const CardPageLoader = () => {
   return (
     <Card>
-      <div className="animate-pulse">
+      <div className="cu-loader cu-loader--cardpage cu-component-updated animate-pulse">
         <div className="p-6 space-y-3">
           <span className="block w-11/12 h-8 rounded-md bg-cu-black-100"></span>
           <span className="block w-6/12 h-3 rounded-md bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/CardLoader/CardPeopleLoader.tsx b/lib/components/Loaders/CardLoader/CardPeopleLoader.tsx
index 6dbda40ca..25c9229d7 100644
--- a/lib/components/Loaders/CardLoader/CardPeopleLoader.tsx
+++ b/lib/components/Loaders/CardLoader/CardPeopleLoader.tsx
@@ -3,7 +3,7 @@ import { Card } from '../../Card/Card'
 export const CardPeopleLoader = () => {
   return (
     <Card isCenter>
-      <div className="animate-pulse">
+      <div className="cu-loader cu-loader--cardpeople cu-component-updated animate-pulse">
         <div className="flex items-center justify-center pt-6">
           <span className="block w-40 h-40 rounded-full bg-cu-black-100"></span>
         </div>
diff --git a/lib/components/Loaders/CardLoader/CardVideoLoader.tsx b/lib/components/Loaders/CardLoader/CardVideoLoader.tsx
index 95c546b7d..7820609ca 100644
--- a/lib/components/Loaders/CardLoader/CardVideoLoader.tsx
+++ b/lib/components/Loaders/CardLoader/CardVideoLoader.tsx
@@ -3,7 +3,7 @@ import { Card } from '../../Card/Card'
 export const CardVideoLoader = () => {
   return (
     <Card>
-      <div className="animate-pulse">
+      <div className="cu-loader cu-loader--cardvideo cu-component-updated animate-pulse">
         <span className="block w-full rounded-t-lg h-60 bg-cu-black-100"></span>
         <div className="p-6 space-y-3">
           <span className="block h-8 rounded-md max-w-80 bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/DescriptionLoader/DescriptionLoader.tsx b/lib/components/Loaders/DescriptionLoader/DescriptionLoader.tsx
index 975dea795..52a76356f 100644
--- a/lib/components/Loaders/DescriptionLoader/DescriptionLoader.tsx
+++ b/lib/components/Loaders/DescriptionLoader/DescriptionLoader.tsx
@@ -6,7 +6,7 @@ export interface DescriptionLoader {
 }
 
 export const DescriptionLoaderWrapper = ({ children }: DescriptionLoader) => {
-  return <dl className="cu-block-spacing">{children}</dl>
+  return <dl className="cu-loader cu-loader--description cu-component-updated cu-block-spacing">{children}</dl>
 }
 
 export const DescriptionLoader = Object.assign(DescriptionLoaderWrapper, {
diff --git a/lib/components/Loaders/EventLoader/EventLoader.tsx b/lib/components/Loaders/EventLoader/EventLoader.tsx
index a1aba5cfa..c2c80963d 100644
--- a/lib/components/Loaders/EventLoader/EventLoader.tsx
+++ b/lib/components/Loaders/EventLoader/EventLoader.tsx
@@ -10,7 +10,7 @@ export interface EventLoaderProps {
 
 export const EventLoader = ({ pageCount = 5, showClearButton = false }: EventLoaderProps) => {
   return (
-    <>
+    <div className="cu-loader cu-loader--event cu-component-updated">
       <Column cols="2/3">
         <Column.Content>
           <StackedList cols="2">
@@ -28,6 +28,6 @@ export const EventLoader = ({ pageCount = 5, showClearButton = false }: EventLoa
           <CalendarLoader showClearButton={showClearButton} />
         </Aside>
       </Column>
-    </>
+    </div>
   )
 }
diff --git a/lib/components/Loaders/ListingLoader/ListingDescriptionLoader.tsx b/lib/components/Loaders/ListingLoader/ListingDescriptionLoader.tsx
index fc217e186..04e40bad8 100644
--- a/lib/components/Loaders/ListingLoader/ListingDescriptionLoader.tsx
+++ b/lib/components/Loaders/ListingLoader/ListingDescriptionLoader.tsx
@@ -8,7 +8,7 @@ export const ListingDescriptionLoader: React.FC<ListingDescriptionLoaderProps> =
   // Render one or two Listing.Body components based on numCol
   const listingBodies = Array.from({ length: numCol }, (_, index) => (
     <Listing.Body key={index}>
-      <div className="animate-pulse">
+      <div className="cu-loader cu-loader--listingdescription cu-component-updated animate-pulse">
         <div className="flex flex-wrap gap-5">
           <div className="grid flex-auto w-64 gap-3">
             <span className="block h-8 rounded-md w-52 bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/ListingLoader/ListingEventLoader.tsx b/lib/components/Loaders/ListingLoader/ListingEventLoader.tsx
index 51394f12e..23298fa23 100644
--- a/lib/components/Loaders/ListingLoader/ListingEventLoader.tsx
+++ b/lib/components/Loaders/ListingLoader/ListingEventLoader.tsx
@@ -4,7 +4,7 @@ export const ListingEventLoader = () => {
   return (
     <Listing>
       <Listing.Body>
-        <div className="animate-pulse">
+        <div className="cu-loader cu-loader--listingevent cu-component-updated animate-pulse">
           <div className="flex flex-wrap gap-5">
             <span className="h-36 w-36 @4xl:lg:h-32 @4xl:lg:w-32 rounded-md bg-cu-black-100"></span>
             <div className="grid flex-auto w-64 gap-3">
diff --git a/lib/components/Loaders/ListingLoader/ListingIconLoader.tsx b/lib/components/Loaders/ListingLoader/ListingIconLoader.tsx
index baa49c9df..257cb9895 100644
--- a/lib/components/Loaders/ListingLoader/ListingIconLoader.tsx
+++ b/lib/components/Loaders/ListingLoader/ListingIconLoader.tsx
@@ -4,7 +4,7 @@ export const ListingIconLoader = () => {
   return (
     <Listing>
       <Listing.Body>
-        <div className="animate-pulse">
+        <div className="cu-loader cu-loader--listingicon cu-component-updated animate-pulse">
           <div className="flex flex-wrap">
             <div className="grid flex-auto gap-3">
               <span className="block w-10 h-10 my-3 rounded-md bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/ListingLoader/ListingNewsLoader.tsx b/lib/components/Loaders/ListingLoader/ListingNewsLoader.tsx
index 583fb6924..3cd3b5771 100644
--- a/lib/components/Loaders/ListingLoader/ListingNewsLoader.tsx
+++ b/lib/components/Loaders/ListingLoader/ListingNewsLoader.tsx
@@ -4,7 +4,7 @@ export const ListingNewsLoader = () => {
   return (
     <Listing>
       <Listing.Body>
-        <div className="animate-pulse">
+        <div className="cu-loader cu-loader--listingnews cu-component-updated animate-pulse">
           <div className="flex flex-col @lg:md:flex-row gap-5 h-full">
             <div className="flex-none max-w-[45%] @xl:md:max-w-[25%] aspect-[4/2.7]">
               <span className="block w-full h-full rounded-md bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/ListingLoader/ListingPageLoader.tsx b/lib/components/Loaders/ListingLoader/ListingPageLoader.tsx
index afffd716c..96fa6981d 100644
--- a/lib/components/Loaders/ListingLoader/ListingPageLoader.tsx
+++ b/lib/components/Loaders/ListingLoader/ListingPageLoader.tsx
@@ -4,7 +4,7 @@ export const ListingPageLoader = () => {
   return (
     <Listing>
       <Listing.Body>
-        <div className="animate-pulse">
+        <div className="cu-loader cu-loader--listingpage cu-component-updated animate-pulse">
           <div className="flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full">
             <div className="flex flex-col flex-1 gap-3">
               <span className="block h-8 rounded-md max-w-80 bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/ListingLoader/ListingPeopleLoader.tsx b/lib/components/Loaders/ListingLoader/ListingPeopleLoader.tsx
index aad76db9c..0c7e96f93 100644
--- a/lib/components/Loaders/ListingLoader/ListingPeopleLoader.tsx
+++ b/lib/components/Loaders/ListingLoader/ListingPeopleLoader.tsx
@@ -4,7 +4,7 @@ export const ListingPeopleLoader = () => {
   return (
     <Listing>
       <Listing.Body>
-        <div className="animate-pulse">
+        <div className="cu-loader cu-loader--listingpeople cu-component-updated animate-pulse">
           <div className="flex flex-col @lg:md:flex-row gap-5 h-full">
             <div className="flex-none max-w-[45%] @xl:md:max-w-[25%] aspect-[4/2.7]">
               <span className="block w-full h-full rounded-md bg-cu-black-100"></span>
diff --git a/lib/components/Loaders/PaginationLoader/PaginationLoader.tsx b/lib/components/Loaders/PaginationLoader/PaginationLoader.tsx
index 4aa849d9b..ae24bd5f0 100644
--- a/lib/components/Loaders/PaginationLoader/PaginationLoader.tsx
+++ b/lib/components/Loaders/PaginationLoader/PaginationLoader.tsx
@@ -18,7 +18,7 @@ export const PaginationLoader = ({ hasBorder, pageCount = 5 }: PaginationLoaderP
   return (
     <>
       <div
-        className={`animate-pulse cu-pagination cu-component-updated not-prose mt-8 flex items-center justify-between first:mt-0 ${borderStyles} `}
+        className={`animate-pulse cu-loader cu-loader--pagination cu-pagination cu-component-updated not-prose mt-8 flex items-center justify-between first:mt-0 ${borderStyles} `}
       >
         <div className="flex justify-between flex-1 sm:hidden">
           <ButtonLoader number={2} isSmall={true} />

From def5332a9fb27a6b1ddcb030c8f050881b06c1dd Mon Sep 17 00:00:00 2001
From: Kevin <kevin@Kevins-MacBook-Pro.local>
Date: Thu, 6 Aug 2026 09:44:06 -0400
Subject: [PATCH 2/2] add: add loader component

---
 CHANGELOG.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
index 400774d8c..0728ad1e0 100644
--- a/CHANGELOG.mdx
+++ b/CHANGELOG.mdx
@@ -19,6 +19,8 @@ Prefix the change with one of these keywords:
 
 ## [0.28.0]
 
+- Review and add loader components
+
 ### Changed
 
 - Removed buttons from card and listing examples, added links on headers