@wavemaker-ai/react-runtime 1.0.0-rc.317 → 1.0.0-rc.322

package/components/common/wm-skeleton.js

@@ -0,0 +1,346 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Skeleton from "@mui/material/Skeleton";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableBody from "@mui/material/TableBody";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+const LAYOUT_DEFAULTS = {
+  table: { rows: 5, columns: 4 },
+  list: { rows: 5 },
+  form: { rows: 4 },
+  tabs: { rows: 4, columns: 3 },
+  wizard: { rows: 4, columns: 3 },
+  accordion: { rows: 4, columns: 3 }
+};
+const shouldShowSkeleton = (loading, showSkeleton) => {
+  if (showSkeleton === false) return false;
+  return Boolean(loading);
+};
+const SKELETON_REGISTRY = {
+  WmButton: { variant: "rounded", height: 36, width: 100 },
+  WmLabel: { variant: "text", width: 160 },
+  WmPicture: { variant: "rectangular", height: 200, width: 200 },
+  WmTable: __spreadValues({ type: "table" }, LAYOUT_DEFAULTS.table),
+  WmList: __spreadValues({ type: "list" }, LAYOUT_DEFAULTS.list),
+  WmForm: __spreadValues({ type: "form" }, LAYOUT_DEFAULTS.form),
+  WmTabs: __spreadValues({ type: "tabs" }, LAYOUT_DEFAULTS.tabs),
+  WmWizard: __spreadValues({ type: "wizard" }, LAYOUT_DEFAULTS.wizard),
+  WmAccordion: __spreadValues({ type: "accordion" }, LAYOUT_DEFAULTS.accordion)
+};
+const repeat = (n, fn) => Array.from({ length: n }, (_, i) => fn(i));
+const wrapperStyle = (width, styles) => __spreadValues({
+  width: width != null ? width : "100%"
+}, styles);
+const FormFieldRow = ({ animation }) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", animation, sx: { mb: 0.5 } }),
+  /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "100%", height: 36, animation })
+] });
+const ContentLines = ({
+  count,
+  animation
+}) => /* @__PURE__ */ jsx(Fragment, { children: repeat(count, (i) => /* @__PURE__ */ jsx(
+  Skeleton,
+  {
+    variant: "text",
+    width: `${Math.max(40, 75 - i * 8)}%`,
+    animation,
+    sx: { fontSize: "1rem" }
+  },
+  i
+)) });
+const TableSkeleton = ({
+  rows = LAYOUT_DEFAULTS.table.rows,
+  columns = LAYOUT_DEFAULTS.table.columns,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsxs(
+  Table,
+  {
+    className,
+    style: __spreadProps(__spreadValues({}, wrapperStyle(width, styles)), { tableLayout: "fixed" }),
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: repeat(columns, (i) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", animation }) }, i)) }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: repeat(rows, (r) => /* @__PURE__ */ jsx(TableRow, { children: repeat(columns, (c) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", animation }) }, c)) }, r)) })
+    ]
+  }
+);
+const ListSkeleton = ({
+  rows = LAYOUT_DEFAULTS.list.rows,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsx(Stack, { className, style: wrapperStyle(width, styles), "aria-hidden": "true", children: repeat(rows, (i) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: __spreadValues({
+      display: "flex",
+      alignItems: "flex-start",
+      gap: 1.5,
+      py: 1.25
+    }, i < rows - 1 && { borderBottom: 1, borderColor: "divider" }),
+    children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "circular",
+          width: 40,
+          height: 40,
+          animation,
+          sx: { flexShrink: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Stack, { spacing: 0.75, sx: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "75%", animation, sx: { fontSize: "1rem" } }),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "text",
+            width: "50%",
+            animation,
+            sx: { fontSize: "0.875rem" }
+          }
+        )
+      ] })
+    ]
+  },
+  i
+)) });
+const FormSkeleton = ({ rows = 4, width, animation, className, styles }) => /* @__PURE__ */ jsx(Stack, { spacing: 2, className, style: wrapperStyle(width, styles), "aria-hidden": "true", children: repeat(rows, (i) => /* @__PURE__ */ jsx(FormFieldRow, { animation }, i)) });
+const TAB_WIDTHS = [96, 72, 88, 64, 80];
+const TabsSkeleton = ({
+  rows = LAYOUT_DEFAULTS.tabs.rows,
+  columns = LAYOUT_DEFAULTS.tabs.columns,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsxs(Stack, { className, style: wrapperStyle(width, styles), "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { borderBottom: 2, borderColor: "divider" }, children: repeat(rows, (i) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        px: 1.25,
+        pb: 1.5,
+        opacity: i === 0 ? 1 : 0.4
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rounded",
+            width: TAB_WIDTHS[i % TAB_WIDTHS.length],
+            height: 20,
+            animation
+          }
+        ),
+        i === 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              bottom: -2,
+              left: 0,
+              right: 0,
+              height: 2,
+              bgcolor: "primary.main",
+              borderRadius: "2px 2px 0 0"
+            }
+          }
+        )
+      ]
+    },
+    i
+  )) }),
+  /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { pt: 2.5 }, children: [
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40%", animation, sx: { fontSize: "1.25rem" } }),
+    /* @__PURE__ */ jsx(ContentLines, { count: columns, animation }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "100%", height: 80, animation, sx: { mt: 0.5 } })
+  ] })
+] });
+const WizardSkeleton = ({
+  rows = LAYOUT_DEFAULTS.wizard.rows,
+  columns = LAYOUT_DEFAULTS.wizard.columns,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsxs(Stack, { className, style: wrapperStyle(width, styles), "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "flex-start", sx: { mb: 3 }, children: repeat(rows, (i) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flex: i < rows - 1 ? 1 : "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { alignItems: "center", spacing: 0.75, sx: { minWidth: 72 }, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 32, height: 32, animation }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 56, animation })
+        ] }),
+        i < rows - 1 && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangular",
+            animation,
+            sx: { flex: 1, height: 2, mx: 1, mt: 2 }
+          }
+        )
+      ]
+    },
+    i
+  )) }),
+  /* @__PURE__ */ jsx(Stack, { spacing: 2, sx: { mb: 3 }, children: repeat(columns, (i) => /* @__PURE__ */ jsx(FormFieldRow, { animation }, i)) }),
+  /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", children: [
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 80, height: 36, animation }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 80, height: 36, animation })
+  ] })
+] });
+const ACCORDION_HEADER_WIDTHS = ["60%", "45%", "70%", "50%"];
+const AccordionSkeleton = ({
+  rows = LAYOUT_DEFAULTS.accordion.rows,
+  columns = LAYOUT_DEFAULTS.accordion.columns,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsx(
+  Stack,
+  {
+    spacing: 0.75,
+    className,
+    style: wrapperStyle(width, styles),
+    "aria-hidden": "true",
+    children: repeat(rows, (i) => {
+      const isExpanded = i === 0;
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: { border: 1, borderColor: "divider", borderRadius: 1, overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 1,
+                  px: 2,
+                  py: 1.5,
+                  bgcolor: isExpanded ? "action.selected" : "transparent"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      variant: "text",
+                      width: ACCORDION_HEADER_WIDTHS[i % ACCORDION_HEADER_WIDTHS.length],
+                      animation,
+                      sx: { fontSize: "1rem" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      variant: "rounded",
+                      width: 16,
+                      height: 8,
+                      animation,
+                      sx: { flexShrink: 0 }
+                    }
+                  )
+                ]
+              }
+            ),
+            isExpanded && /* @__PURE__ */ jsx(Stack, { spacing: 1, sx: { px: 2, py: 1.5, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(ContentLines, { count: columns, animation }) })
+          ]
+        },
+        i
+      );
+    })
+  }
+);
+const LAYOUT_MAP = {
+  table: TableSkeleton,
+  list: ListSkeleton,
+  form: FormSkeleton,
+  tabs: TabsSkeleton,
+  wizard: WizardSkeleton,
+  accordion: AccordionSkeleton
+};
+const WmSkeleton = (_a) => {
+  var _b = _a, {
+    type,
+    variant = "rectangular",
+    height,
+    animation = "pulse"
+  } = _b, layoutProps = __objRest(_b, [
+    "type",
+    "variant",
+    "height",
+    "animation"
+  ]);
+  if (type) {
+    const Layout = LAYOUT_MAP[type];
+    return /* @__PURE__ */ jsx(Layout, __spreadValues({ animation }, layoutProps));
+  }
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant,
+      width: layoutProps.width,
+      height,
+      animation,
+      className: layoutProps.className,
+      style: layoutProps.styles
+    }
+  );
+};
+var wm_skeleton_default = WmSkeleton;
+export {
+  LAYOUT_DEFAULTS,
+  SKELETON_REGISTRY,
+  WmSkeleton,
+  wm_skeleton_default as default,
+  shouldShowSkeleton
+};

package/components/container/accordion/accordion-pane/index.d.ts

@@ -77,5 +77,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/accordion/index.d.ts

@@ -24,6 +24,8 @@ declare const _default: React.ComponentType<{
     }) => void;
     onLoad?: (props: WmAccordionProps, onLoadCallback?: () => void) => void;
     render?: (item: Record<string, unknown>, index: number, dataset: Record<string, unknown>[]) => React.ReactNode;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
@@ -72,5 +74,7 @@ declare const _default: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/accordion/index.js

@@ -28,6 +28,11 @@ import {
   getWidgetState,
   setWidgetState
 } from "../../../utils/state-persistance";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 const DEFAULT_CLASS = "app-accordion panel-group";
 function isStaticAccordionPane(child) {
   return React.isValidElement(child) && (child.type === WmAccordionPaneWithBase || child.type === WmAccordionPane);
@@ -201,6 +206,17 @@ const WmAccordion = memo(
         return child;
       }) : null;
     };
+    if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
+      return /* @__PURE__ */ jsx(
+        WmSkeleton,
+        __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmAccordion"]), {
+          rows: props.skeletonRows,
+          columns: props.skeletonColumns,
+          className: clsx(DEFAULT_CLASS, props.className),
+          styles: props.styles
+        })
+      );
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -223,7 +239,13 @@ const WmAccordion = memo(
       "closeothers",
       "children",
       "hidden",
-      "show"
+      "show",
+      "loading",
+      "showSkeleton",
+      "skeletonRows",
+      "skeletonColumns",
+      "className",
+      "styles"
     ];
     return keys.every((key) => prevProps[key] === nextProps[key]);
   }

package/components/container/accordion/props.d.ts

@@ -49,6 +49,16 @@ export interface AccordionPropsBase {
      * Render function for dynamic accordion. Receives item, index, and full dataset.
      */
     render?: (item: Record<string, unknown>, index: number, dataset: Record<string, unknown>[]) => ReactNode;
+    /**
+     * Number of skeleton accordion panes shown while loading.
+     * @default 4
+     */
+    skeletonRows?: number;
+    /**
+     * Number of skeleton content lines shown in the expanded pane while loading.
+     * @default 3
+     */
+    skeletonColumns?: number;
 }
 /**
  * Combined props for the WmAccordion component, including base WaveMaker props.

package/components/container/index.d.ts

@@ -80,5 +80,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/index.js

@@ -33,7 +33,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useMemo, useCallback } from "react";
 import { clsx } from "clsx";
 import { withBaseWrapper } from "../../higherOrder/withBaseWrapper";
-import { layoutSizeUtil } from "../../utils/layoutsize-util";
+import { useLayoutSize } from "../../hooks/useLayoutSize";
 import { removeInvalidAttributes } from "../../utils/attr";
 import { normalizeBackgroundImage } from "../../utils/style-utils";
 const DEFAULT_CLASS = "app-container";
@@ -161,10 +161,8 @@ const WmContainer = (props) => {
     if (containerRef.current && (props == null ? void 0 : props.name) && ((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[props.name])) {
       listener.Widgets[props.name].nativeElement = containerRef.current;
     }
-    if (containerRef.current && (props.layoutWidth || props.layoutHeight)) {
-      layoutSizeUtil(containerRef.current, props.layoutWidth, props.layoutHeight);
-    }
   }, [containerRef.current]);
+  useLayoutSize(containerRef, props.layoutWidth, props.layoutHeight);
   function handleClick(event) {
     onClick == null ? void 0 : onClick(event, widget_instance);
   }

package/components/container/layout-grid/grid-column/index.d.ts

@@ -66,5 +66,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/layout-grid/grid-row/index.d.ts

@@ -62,5 +62,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/layout-grid/index.d.ts

@@ -64,5 +64,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/linear-layout/index.d.ts

@@ -63,5 +63,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/linear-layout/linear-layout-item/index.d.ts

@@ -60,5 +60,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/panel/index.d.ts

@@ -114,5 +114,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/repeat-template/index.d.ts

@@ -78,5 +78,7 @@ declare const _default: import("react").ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/tabs/index.d.ts

@@ -32,6 +32,8 @@ declare const _default: React.ComponentType<{
     render?: (item: Record<string, unknown>, index: number, dataset: Record<string, unknown>[], isActive?: boolean) => React.ReactNode;
     selectedindex?: number;
     onChange?: (event: React.SyntheticEvent | null, props: WmTabsProps, newPaneIndex: number, oldPaneIndex: number) => void;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
@@ -80,5 +82,7 @@ declare const _default: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/tabs/index.js

@@ -36,6 +36,11 @@ import Typography from "@mui/material/Typography";
 import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
 import WmTabPane from "./tab-pane";
 import { DEFAULT_PROPS } from "./props";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 import {
   getWidgetState,
   setWidgetState
@@ -90,6 +95,17 @@ const useTabsContext = () => {
 const WmTabs = memo(
   (Props) => {
     const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), Props);
+    if (shouldShowSkeleton(props.loading, props.showSkeleton)) {
+      return /* @__PURE__ */ jsx(
+        WmSkeleton,
+        __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmTabs"]), {
+          rows: props.skeletonRows,
+          columns: props.skeletonColumns,
+          className: clsx("app-tabs clearfix", props.className),
+          styles: props.styles
+        })
+      );
+    }
     const {
       defaultpaneindex,
       statehandler,
@@ -528,7 +544,13 @@ const WmTabs = memo(
       "iconposition",
       "render",
       "selectedindex",
-      "children"
+      "children",
+      "loading",
+      "showSkeleton",
+      "skeletonRows",
+      "skeletonColumns",
+      "className",
+      "styles"
     ];
     return keys.every((key) => {
       if (key === "children") {

package/components/container/tabs/props.d.ts

@@ -96,6 +96,16 @@ export interface TabsPropsBase {
      * Called when the active tab changes.
      */
     onChange?: (event: React.SyntheticEvent | null, props: WmTabsProps, newPaneIndex: number, oldPaneIndex: number) => void;
+    /**
+     * Number of skeleton tab headers shown while loading.
+     * @default 4
+     */
+    skeletonRows?: number;
+    /**
+     * Number of skeleton content lines shown in the active tab panel while loading.
+     * @default 3
+     */
+    skeletonColumns?: number;
 }
 /**
  * Combined props for the WmTabs component, including base WaveMaker props.

package/components/container/tabs/tab-pane/index.d.ts

@@ -87,5 +87,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/container/wizard/index.d.ts

@@ -30,6 +30,8 @@ declare const WmWizardStandalone: React.ComponentType<{
     onCancel?: (currentStep: WizardStepData | null, steps: WizardStepData[]) => void;
     onDone?: (currentStep: WizardStepData, steps: WizardStepData[]) => void;
     standalone?: boolean;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
     show?: boolean | string;
@@ -75,6 +77,8 @@ declare const WmWizardStandalone: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmWizardStandalone as WmWizard };
 /**
@@ -117,6 +121,8 @@ declare const _default: React.ComponentType<{
     onCancel?: (currentStep: WizardStepData | null, steps: WizardStepData[]) => void;
     onDone?: (currentStep: WizardStepData, steps: WizardStepData[]) => void;
     standalone?: boolean;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
     show?: boolean | string;
@@ -162,5 +168,7 @@ declare const _default: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;