@moises.ai/design-system 4.17.2 → 4.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.17.2",
+  "version": "4.17.4",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/SetlistList/SetlistList.jsx

@@ -1,4 +1,4 @@
-import { Flex, Text, Avatar, ScrollArea } from '@radix-ui/themes'
+import { Flex, Text, Avatar, ScrollArea, Skeleton } from '@radix-ui/themes'
 import { useDroppable } from '@dnd-kit/core'
 import styles from './SetlistList.module.css'
 import classNames from 'classnames'
@@ -145,6 +145,7 @@ export const SetlistItem = ({
   onDragLeave,
   onDragOver,
   onDrop,
+  isLoading = false,  
 }) => {
   const [isHovering, setIsHovering] = useState(false)
 
@@ -210,9 +211,11 @@ export const SetlistItem = ({
           [styles.collapsedInner]: collapsed,
         })}
       >
-        {avatar && (
+        {(avatar || isLoading) && (
           <div className={styles.avatarSetlist}>
-            {typeof avatar === 'string' ? (
+            {isLoading ? (
+              <Skeleton className={styles.avatarSetlistSkeleton} />
+            ) : typeof avatar === 'string' ? (
               <Avatar
                 src={avatar}
                 fallback={<SetlistIcon width={16} height={16} />}
@@ -226,28 +229,37 @@ export const SetlistItem = ({
         )}
         <Flex
           direction="column"
+          gap={isLoading ? '1' : '0'}
           className={classNames(styles.textWrapper, {
             [styles.textWrapperHidden]: collapsed,
           })}
         >
-          {text && (
-            <Text
-              size="2"
-              weight="regular"
-              className={styles.textNewSetlist}
-              truncate
-            >
-              {text}
-            </Text>
-          )}
-          <Text
-            size="1"
-            weight="regular"
-            className={styles.textSubtitle}
-            truncate
-          >
-            {subtitle}
-          </Text>
+          {(text || isLoading) &&
+            (isLoading ? (
+              <Skeleton className={styles.textNewSetlistSkeleton} />
+            ) : (
+              <Text
+                size="2"
+                weight="regular"
+                className={styles.textNewSetlist}
+                truncate
+              >
+                {text}
+              </Text>
+            ))}
+          {(subtitle || isLoading) &&
+            (isLoading ? (
+              <Skeleton className={styles.textSubtitleSkeleton} />
+            ) : (
+              <Text
+                size="1"
+                weight="regular"
+                className={styles.textSubtitle}
+                truncate
+              >
+                {subtitle}
+              </Text>
+            ))}
         </Flex>
       </Flex>
       {dropdownMenuOptions &&
@@ -292,6 +304,7 @@ export const SetlistList = ({
   droppable = false,
   activeDropSetlistId = null,
   enableDndDropTargets = false,
+  className,
 }) => {
   const { close, isMobile: isMobileDrawer } = useMobileDrawerContext()
   const [openSetlistMenuId, setOpenSetlistMenuId] = useState(null)
@@ -575,7 +588,7 @@ export const SetlistList = ({
             ) : (
               <NewSetlistButton
                 onClick={handleNewSetlistClick}
-                className={classNames({
+                className={classNames(className, {
                   [styles.staggerItem]: isStaggerActive,
                   [styles.staggerAnimateIn]: isStaggerActive && isExpanding,
                   [styles.staggerAnimateOut]: isStaggerActive && isShrinking,
@@ -620,10 +633,11 @@ export const SetlistList = ({
                 moises={setlist.moises}
                 text={setlist.label}
                 subtitle={setlist.subtitle}
+                isLoading={setlist.isLoading}
                 dropdownMenuOptions={setlist.dropdownMenuOptions}
                 collapsed={itemCollapsed}
                 isMobile={isMobile}
-                className={classNames({
+                className={classNames(className, {
                   [styles.collapsedStackItem]: showCollapsedStack,
                   [styles.collapsedTransition]: collapsed && showCollapsedStack,
                   [styles.staggerItem]: isStaggerActive,

package/src/components/SetlistList/SetlistList.module.css

@@ -92,6 +92,12 @@
   z-index: 1;
 }
 
+.avatarSetlistSkeleton {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+
 .avatarClickable {
   cursor: pointer;
 }
@@ -128,6 +134,12 @@
   color: var(--neutral-alpha-11);
 }
 
+.textNewSetlistSkeleton {
+  height: 14px;
+  width: 126px;
+  border-radius: 4px;
+}
+
 .collapsed .textNewSetlist {
   opacity: 0;
 }
@@ -140,6 +152,12 @@
   white-space: nowrap;
 }
 
+.textSubtitleSkeleton {
+  height: 12px;
+  width: 95px;
+  border-radius: 4px;
+}
+
 .collapsed .textSubtitle {
   opacity: 0;
 }

package/src/components/SetlistList/SetlistList.stories.jsx

@@ -236,6 +236,28 @@ export const Empty = {
   },
 }
 
+const loadingSetlists = [
+  { id: 'loading-1', isLoading: true },
+  { id: 'loading-2', isLoading: true },
+  { id: 'loading-3', isLoading: true },
+]
+
+export const Loading = {
+  render: (args) => (
+    <SetlistList
+      {...args}
+      setlists={loadingSetlists}
+      onNewSetlistClick={() => {
+        args.onNewSetlistClick?.()
+      }}
+    />
+  ),
+  args: {
+    collapsed: false,
+    isMobile: false,
+  },
+}
+
 const trackRows = [
   {
     id: 'track-1',