Merge pull request #3089 from pyth-network/fix/skeleton

fix: skeleton fill

Author: alexcambose

packages/component-library/src/Skeleton/index.module.scss

@@ -11,13 +11,13 @@
   }
 }
 
-.fullSkeleton {
-  display: inline-block;
-}
-
 .skeleton {
   border-radius: theme.border-radius("lg");
 
+  &[data-fill] {
+    width: 100%;
+  }
+
   .skeletonInner {
     display: inline flow-root;
     width: calc(theme.spacing(1) * var(--skeleton-width));

packages/component-library/src/Skeleton/index.stories.tsx

@@ -28,9 +28,14 @@ const meta = {
 export default meta;
 
 export const Skeleton = {
+  render: (args) => (
+    <div style={{ width: "100vw", display: "flex", justifyContent: "center" }}>
+      <SkeletonComponent {...args} />
+    </div>
+  ),
   args: {
     label: "Loading",
-    width: 20,
     fill: false,
+    width: 20,
   },
 } satisfies StoryObj<typeof SkeletonComponent>;

packages/component-library/src/Skeleton/index.tsx

@@ -11,22 +11,25 @@ type Props = Omit<ComponentProps<"span">, "children"> & {
   fill?: boolean | undefined;
 };
 
-export const Skeleton = ({ className, label, width, fill, ...props }: Props) =>
-  fill ? (
-    <span className={clsx(styles.fullSkeleton, className)} {...props}>
+export const Skeleton = ({
+  className,
+  label,
+  width,
+  fill,
+  ...props
+}: Props) => (
+  <span
+    data-fill-width={width === undefined ? "" : undefined}
+    {...(width &&
+      !fill && { style: { "--skeleton-width": width } as CSSProperties })}
+    data-fill={fill ? "" : undefined}
+    className={clsx(styles.skeleton, className)}
+  >
+    <span className={clsx(styles.skeletonInner, className)} {...props}>
       <Label>{label ?? "Loading"}</Label>
     </span>
-  ) : (
-    <span
-      data-fill-width={width === undefined ? "" : undefined}
-      {...(width && { style: { "--skeleton-width": width } as CSSProperties })}
-      className={clsx(styles.skeleton, { [className ?? ""]: fill })}
-    >
-      <span className={clsx(styles.skeletonInner, className)} {...props}>
-        <Label>{label ?? "Loading"}</Label>
-      </span>
-    </span>
-  );
+  </span>
+);
 
 const Label = ({ children }: { children: string | undefined }) => (
   <span className={styles.skeletonLabel}>{children ?? "Loading"}</span>