@asdp/ferryui 0.1.15 → 0.1.16

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
+import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React2, { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { Row, Col } from 'react-grid-system';
@@ -343,10 +343,29 @@ var CardPromo = ({
   buttonText = "Lihat Detail",
   className,
   imageClassName,
-  descriptionClassName
+  descriptionClassName,
+  isLoading = false
 }) => {
   const classes = useStyles3();
   const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      CarouselCard,
+      {
+        autoSize: true,
+        className: mergeClasses(classes.actionCard, className),
+        style: { cursor: "default" },
+        children: /* @__PURE__ */ jsxs(Skeleton, { "aria-label": "Loading content", children: [
+          /* @__PURE__ */ jsx("div", { className: mergeClasses(classes.imageContainer, imageClassName), children: /* @__PURE__ */ jsx(SkeletonItem, { shape: "rectangle", style: { width: "100%", height: "100%" } }) }),
+          /* @__PURE__ */ jsx(Row, { className: classes.infoWrapper, children: /* @__PURE__ */ jsxs(Col, { className: classes.info, xs: 12, children: [
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "70%", height: "20px" } }),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "90%", height: "16px" } }),
+            /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80%", height: "16px" } })
+          ] }) })
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     CarouselCard,
     {
@@ -412,10 +431,24 @@ var CardBanner = ({
   alt,
   index = 0,
   totalBanners,
-  onClick
+  onClick,
+  isLoading = false
 }) => {
   const classes = useStyles4();
   const ariaLabel = totalBanners ? `Banner ${index + 1} of ${totalBanners}` : `Banner ${index + 1}`;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(CarouselCard, { className: classes.bannerCard, children: /* @__PURE__ */ jsx(Skeleton, { "aria-label": "Loading banner", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+      SkeletonItem,
+      {
+        shape: "rectangle",
+        style: {
+          width: "100%",
+          height: "100%",
+          borderRadius: tokens.borderRadiusXLarge
+        }
+      }
+    ) }) });
+  }
   return /* @__PURE__ */ jsx(
     CarouselCard,
     {