Feature/wsdev 6699 loader components

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

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}`}>

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">

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>

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>

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>

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>

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>

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, {

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>
   )
 }

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>

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">

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>

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>

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>

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>

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} />