@envive-ai/react-widgets-v3 0.3.62 → 0.3.63

package/dist/hocs/withBaseWidget/types.d.cts

@@ -12,6 +12,13 @@ interface BaseWidgetProps {
   uiConfig?: OrgUIConfigV3;
   isLoading?: boolean;
   isHardcopyLoading?: boolean;
+  /**
+   * True once THIS widget's own hardcopy request has settled (resolved or errored),
+   * regardless of whether it produced content. Lets a widget tell "hardcopy not received
+   * yet" apart from "hardcopy finished with no content" so it can leave a loading placeholder
+   * after a failed fetch instead of showing it forever.
+   */
+  isHardcopySettled?: boolean;
   isPageLoading?: boolean;
   isWidgetConfigLoading?: boolean;
   isUiConfigLoading?: boolean;

package/dist/hocs/withBaseWidget/types.d.ts

@@ -12,6 +12,13 @@ interface BaseWidgetProps {
   uiConfig?: OrgUIConfigV3;
   isLoading?: boolean;
   isHardcopyLoading?: boolean;
+  /**
+   * True once THIS widget's own hardcopy request has settled (resolved or errored),
+   * regardless of whether it produced content. Lets a widget tell "hardcopy not received
+   * yet" apart from "hardcopy finished with no content" so it can leave a loading placeholder
+   * after a failed fetch instead of showing it forever.
+   */
+  isHardcopySettled?: boolean;
   isPageLoading?: boolean;
   isWidgetConfigLoading?: boolean;
   isUiConfigLoading?: boolean;

package/dist/hocs/withBaseWidget/withBaseWidget.cjs

@@ -30,7 +30,6 @@ function withBaseWidget(Widget, options) {
 		const [widgetConfigSettled, setWidgetConfigSettled] = (0, react.useState)(false);
 		const [uiConfigSettled, setUiConfigSettled] = (0, react.useState)(false);
 		const ownRequestsSettled = hardcopySettled && widgetConfigSettled && uiConfigSettled;
-		const isLoading = !ownRequestsSettled && (isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading);
 		const { isVisible } = (0, __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent.useTrackComponentVisibleEvent)(widgetRef, {
 			widget_config_id: widgetConfigId,
 			widget_type: widgetType,
@@ -44,6 +43,7 @@ function withBaseWidget(Widget, options) {
 			widgetConfigId,
 			widgetType
 		]);
+		const isLoading = startLoading && !ownRequestsSettled;
 		const settledStateRef = (0, react.useRef)({
 			hardcopy: false,
 			widgetConfig: false,
@@ -119,6 +119,7 @@ function withBaseWidget(Widget, options) {
 				...props,
 				isLoading,
 				isHardcopyLoading,
+				isHardcopySettled: hardcopySettled,
 				isPageLoading,
 				isWidgetConfigLoading,
 				isUiConfigLoading,

package/dist/hocs/withBaseWidget/withBaseWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime1.JSX.Element;
+  (props: P): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/hocs/withBaseWidget/withBaseWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.js";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime17.JSX.Element;
+  (props: P): react_jsx_runtime19.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/hocs/withBaseWidget/withBaseWidget.js

@@ -28,7 +28,6 @@ function withBaseWidget(Widget, options) {
 		const [widgetConfigSettled, setWidgetConfigSettled] = useState(false);
 		const [uiConfigSettled, setUiConfigSettled] = useState(false);
 		const ownRequestsSettled = hardcopySettled && widgetConfigSettled && uiConfigSettled;
-		const isLoading = !ownRequestsSettled && (isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading);
 		const { isVisible } = useTrackComponentVisibleEvent(widgetRef, {
 			widget_config_id: widgetConfigId,
 			widget_type: widgetType,
@@ -42,6 +41,7 @@ function withBaseWidget(Widget, options) {
 			widgetConfigId,
 			widgetType
 		]);
+		const isLoading = startLoading && !ownRequestsSettled;
 		const settledStateRef = useRef({
 			hardcopy: false,
 			widgetConfig: false,
@@ -117,6 +117,7 @@ function withBaseWidget(Widget, options) {
 				...props,
 				isLoading,
 				isHardcopyLoading,
+				isHardcopySettled: hardcopySettled,
 				isPageLoading,
 				isWidgetConfigLoading,
 				isUiConfigLoading,

package/dist/packages/widgets/dist/SearchResults/SearchResultsWidget.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/packages/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/packages/widgets/dist/SuggestionBar/SuggestionBar.d.ts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime3.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime12.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime12.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime18.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime17.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime18.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime17.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime5.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime7.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime5.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime7.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime15.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime10.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime15.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime10.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts
 declare const ChatPreviewWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewWidgetProps {
 declare const ChatPreviewWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewWidgetProps): react_jsx_runtime9.JSX.Element;
+  }: ChatPreviewWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts
 declare const ChatPreviewWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime9.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewWidgetProps {
 declare const ChatPreviewWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewWidgetProps): react_jsx_runtime9.JSX.Element;
+  }: ChatPreviewWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -13,7 +13,7 @@ declare const FloatingChatWidget: {
     previewChatAlwaysOpen,
     previewCXButtonsEnabled,
     previewDisclaimer
-  }?: FloatingChatWidgetProps): react_jsx_runtime2.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -13,7 +13,7 @@ declare const FloatingChatWidget: {
     previewChatAlwaysOpen,
     previewCXButtonsEnabled,
     previewDisclaimer
-  }?: FloatingChatWidgetProps): react_jsx_runtime8.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts
 
@@ -8,7 +8,7 @@ interface FullPageSalesAgentBaseWidgetProps {
 declare const FullPageSalesAgentWidget: {
   ({
     widgetConfigId
-  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime7.JSX.Element;
+  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime16.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts
 
@@ -8,7 +8,7 @@ interface FullPageSalesAgentBaseWidgetProps {
 declare const FullPageSalesAgentWidget: {
   ({
     widgetConfigId
-  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime6.JSX.Element;
+  }: FullPageSalesAgentBaseWidgetProps): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.cjs

@@ -18,25 +18,14 @@ let __envive_ai_react_toolkit_v3_ProductCard = require("@envive-ai/react-toolkit
 let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.tsx
-const mockPrompts = [
-	"Loading prompt 1",
-	"Loading prompt 2",
-	"Loading prompt 3",
-	"Loading prompt 4",
-	"Loading prompt 5"
-];
-const mockHeadline = "Loading...";
-const mockAnimatedText = ["Loading..."];
 const ProductCardWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
-	const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
-	const hardCopyHeadline = hardcopyContent?.values?.headline;
-	const headline = isLoading ? mockHeadline : hardCopyHeadline || "";
-	const hardCopyAnimatedText = hardcopyContent?.values?.animatedText || [];
-	const animatedText = isLoading ? mockAnimatedText : hardCopyAnimatedText;
-	const hardCopyPrompts = hardcopyContent?.values?.prompts || [];
-	const prompts = isLoading ? mockPrompts : hardCopyPrompts;
+	const { hardcopyContent, widgetConfig, uiConfig, isLoading, isHardcopySettled } = props;
+	const showSkeleton = isLoading || !hardcopyContent && !isHardcopySettled;
+	const headline = hardcopyContent?.values?.headline || "";
+	const animatedText = hardcopyContent?.values?.animatedText || [];
+	const prompts = hardcopyContent?.values?.prompts || [];
 	const placeholder = hardcopyContent?.values?.placeholder;
 	const productCardWidgetConfig = widgetConfig;
 	const carouselId = productCardWidgetConfig?.contentId || "";
@@ -110,6 +99,7 @@ const ProductCardWidgetHandler = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ProductCard.ProductCard, {
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,
 		variant,
+		isLoading: showSkeleton,
 		imageSrc,
 		fallbackColor,
 		headline,

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
 interface ProductCardWidgetProps {
@@ -7,7 +7,7 @@ interface ProductCardWidgetProps {
 declare const ProductCardWidget: {
   ({
     widgetConfigId
-  }: ProductCardWidgetProps): react_jsx_runtime19.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
 interface ProductCardWidgetProps {
@@ -7,7 +7,7 @@ interface ProductCardWidgetProps {
 declare const ProductCardWidget: {
   ({
     widgetConfigId
-  }: ProductCardWidgetProps): react_jsx_runtime5.JSX.Element;
+  }: ProductCardWidgetProps): react_jsx_runtime9.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ProductCardWidget/ProductCardWidget.js

@@ -17,25 +17,14 @@ import { ProductCard, ProductCardVariant } from "@envive-ai/react-toolkit-v3/Pro
 import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
 
 //#region src/widgets/ProductCardWidget/ProductCardWidget.tsx
-const mockPrompts = [
-	"Loading prompt 1",
-	"Loading prompt 2",
-	"Loading prompt 3",
-	"Loading prompt 4",
-	"Loading prompt 5"
-];
-const mockHeadline = "Loading...";
-const mockAnimatedText = ["Loading..."];
 const ProductCardWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
-	const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
-	const hardCopyHeadline = hardcopyContent?.values?.headline;
-	const headline = isLoading ? mockHeadline : hardCopyHeadline || "";
-	const hardCopyAnimatedText = hardcopyContent?.values?.animatedText || [];
-	const animatedText = isLoading ? mockAnimatedText : hardCopyAnimatedText;
-	const hardCopyPrompts = hardcopyContent?.values?.prompts || [];
-	const prompts = isLoading ? mockPrompts : hardCopyPrompts;
+	const { hardcopyContent, widgetConfig, uiConfig, isLoading, isHardcopySettled } = props;
+	const showSkeleton = isLoading || !hardcopyContent && !isHardcopySettled;
+	const headline = hardcopyContent?.values?.headline || "";
+	const animatedText = hardcopyContent?.values?.animatedText || [];
+	const prompts = hardcopyContent?.values?.prompts || [];
 	const placeholder = hardcopyContent?.values?.placeholder;
 	const productCardWidgetConfig = widgetConfig;
 	const carouselId = productCardWidgetConfig?.contentId || "";
@@ -109,6 +98,7 @@ const ProductCardWidgetHandler = (props) => {
 	return /* @__PURE__ */ jsx(ProductCard, {
 		theme: Theme.GLOBAL_CUSTOM,
 		variant,
+		isLoading: showSkeleton,
 		imageSrc,
 		fallbackColor,
 		headline,

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime3.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime3.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime18.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts
 interface PromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface PromptCarouselWidgetProps {
 declare const PromptCarouselWidget: {
   ({
     widgetConfigId
-  }: PromptCarouselWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: PromptCarouselWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts
 interface PromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface PromptCarouselWidgetProps {
 declare const PromptCarouselWidget: {
   ({
     widgetConfigId
-  }: PromptCarouselWidgetProps): react_jsx_runtime14.JSX.Element;
+  }: PromptCarouselWidgetProps): react_jsx_runtime8.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts
 interface SocialProofFlowWidgetProps {
@@ -7,7 +7,7 @@ interface SocialProofFlowWidgetProps {
 declare const SocialProofFlowWidget: {
   ({
     widgetConfigId
-  }: SocialProofFlowWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: SocialProofFlowWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts
 interface SocialProofFlowWidgetProps {
@@ -7,7 +7,7 @@ interface SocialProofFlowWidgetProps {
 declare const SocialProofFlowWidget: {
   ({
     widgetConfigId
-  }: SocialProofFlowWidgetProps): react_jsx_runtime13.JSX.Element;
+  }: SocialProofFlowWidgetProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.d.ts
 declare const SocialProofWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime15.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 interface SocialProofWidgetProps {
@@ -12,7 +12,7 @@ interface SocialProofWidgetProps {
 declare const SocialProofWidget: {
   ({
     widgetConfigId
-  }: SocialProofWidgetProps): react_jsx_runtime15.JSX.Element;
+  }: SocialProofWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.d.ts
 declare const SocialProofWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 interface SocialProofWidgetProps {
@@ -12,7 +12,7 @@ interface SocialProofWidgetProps {
 declare const SocialProofWidget: {
   ({
     widgetConfigId
-  }: SocialProofWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: SocialProofWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts
 interface TitledPromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface TitledPromptCarouselWidgetProps {
 declare const TitledPromptCarouselWidget: {
   ({
     widgetConfigId
-  }: TitledPromptCarouselWidgetProps): react_jsx_runtime14.JSX.Element;
+  }: TitledPromptCarouselWidgetProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts
 interface TitledPromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface TitledPromptCarouselWidgetProps {
 declare const TitledPromptCarouselWidget: {
   ({
     widgetConfigId
-  }: TitledPromptCarouselWidgetProps): react_jsx_runtime3.JSX.Element;
+  }: TitledPromptCarouselWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime4.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime17.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime17.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime1.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime1.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SuggestionBar/SuggestionBar.d.cts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.cjs";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime3.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.62",
+  "version": "0.3.63",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.tsx

@@ -408,6 +408,42 @@ describe('withBaseWidget', () => {
       });
     });
 
+    it('stays loading until its OWN hardcopy settles even after the shared flag clears', async () => {
+      // Complements INTERRUPT-424: that fix stops a settled widget being reverted when a
+      // shared flag flips TRUE. This is the mirror case — another widget's hardcopy finishing
+      // flips the single shared HardcopyProvider boolean to FALSE while THIS widget's own
+      // hardcopy is still in flight. isLoading must track this widget's own requests, not
+      // follow the shared flag down and paint empty content early.
+      mockHardcopyLoading = false;
+      mockPageLoading = false;
+      mockWidgetConfigLoading = false;
+      mockUiConfigLoading = false;
+      let resolveHardcopy!: (value: HardcopyResponse) => void;
+      mockGetHardcopy.mockReturnValue(
+        new Promise<HardcopyResponse>(resolve => {
+          resolveHardcopy = resolve;
+        }),
+      );
+
+      const WrappedWidget = withBaseWidget(TestWidget);
+      render(
+        <WrappedWidget
+          widgetConfigId="test-config-own-hardcopy"
+          widgetType={WidgetTypeV3.PromptCarouselV3}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('true');
+      });
+
+      resolveHardcopy({ responseId: 'r', language: 'en', values: {} });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      });
+    });
+
     it.each([
       [
         'widgetConfig',

package/src/hocs/withBaseWidget/types.ts

@@ -15,6 +15,13 @@ export interface BaseWidgetProps {
   uiConfig?: OrgUIConfigV3;
   isLoading?: boolean;
   isHardcopyLoading?: boolean;
+  /**
+   * True once THIS widget's own hardcopy request has settled (resolved or errored),
+   * regardless of whether it produced content. Lets a widget tell "hardcopy not received
+   * yet" apart from "hardcopy finished with no content" so it can leave a loading placeholder
+   * after a failed fetch instead of showing it forever.
+   */
+  isHardcopySettled?: boolean;
   isPageLoading?: boolean;
   isWidgetConfigLoading?: boolean;
   isUiConfigLoading?: boolean;

package/src/hocs/withBaseWidget/withBaseWidget.tsx

@@ -51,10 +51,6 @@ export function withBaseWidget<P extends BaseWidgetProps>(
     const [uiConfigSettled, setUiConfigSettled] = useState(false);
     const ownRequestsSettled = hardcopySettled && widgetConfigSettled && uiConfigSettled;
 
-    const isLoading =
-      !ownRequestsSettled &&
-      (isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading);
-
     const visibilityEventProps = {
       widget_config_id: widgetConfigId,
       widget_type: widgetType,
@@ -74,6 +70,15 @@ export function withBaseWidget<P extends BaseWidgetProps>(
       return isVisible && !!widgetConfigId && !!widgetType;
     }, [isVisible, widgetConfigId, widgetType]);
 
+    // A widget is loading only while its OWN requests are in flight. Deliberately NOT
+    // derived from the shared provider isLoading flags (isHardcopyLoading, isPageLoading,
+    // …): each of those is a single boolean shared by every widget, so any widget issuing a
+    // fetch flips them for all of them — which let another widget's activity pin this one in
+    // (or stuck in) its loading state even after its own requests had settled. `startLoading`
+    // gates the leading edge so a not-yet-started widget doesn't report loading off the
+    // still-false latches.
+    const isLoading = startLoading && !ownRequestsSettled;
+
     // Watchdog: a widget that is still in its loading state this long after it started
     // fetching is stuck (or on a very slow connection). Log a console error so session
     // tools that capture the console (Quantum Metric, Datadog RUM) can count and segment
@@ -163,6 +168,7 @@ export function withBaseWidget<P extends BaseWidgetProps>(
           {...props}
           isLoading={isLoading}
           isHardcopyLoading={isHardcopyLoading}
+          isHardcopySettled={hardcopySettled}
           isPageLoading={isPageLoading}
           isWidgetConfigLoading={isWidgetConfigLoading}
           isUiConfigLoading={isUiConfigLoading}

package/src/stories/FullPageSalesAgentWidget.stories.tsx

@@ -1,13 +1,43 @@
+import {
+  HardcopyProvider,
+  HardcopyResponse,
+} from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import {
   PageVisitCategory,
   useSalesAgent,
 } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { MockHardcopyService } from '@envive-ai/react-hooks/services/hardcopyService';
 import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import { FullPageSalesAgentWidget } from '../widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget';
 
+// Overlay content for the PartialView story below — needs welcomeOverlayTitle
+// set for FullPageSalesAgent's own overlayEnabled check to pass, since
+// partialViewActive is `partialViewEnabled && overlayEnabled`.
+const partialViewHardcopy: HardcopyResponse = {
+  responseId: 'mock-fpsa-partial-view',
+  language: 'en',
+  values: {
+    welcomeMessageTitle: "Hi! I'm your personal shopping assistant",
+    welcomeMessageText: 'How can I help you today?',
+    chatFooterTextFieldPlaceholderText: 'Ask me anything...',
+    welcomeOverlayTitle: 'How can I help you find the right product?',
+    welcomeOverlayPromptSuggestions: [
+      'Help me find my size',
+      'What are your best sellers?',
+      'Gift ideas for a friend',
+    ],
+    welcomeOverlayProductCarouselTitle: 'Fan favorites',
+    welcomeOverlayProductIds: [
+      'mix-match-nursing-pumping-bra-bundle',
+      'mothers-day-morning-bundle',
+    ],
+  },
+};
+
 const meta = {
   title: 'Widgets V3/FullPageSalesAgentWidget',
   component: FullPageSalesAgentWidget,
@@ -66,3 +96,37 @@ export const Playground: Story = {
     },
   },
 };
+
+export const PartialView: Story = {
+  name: 'Partial View (default)',
+  // 'fake-widget-config-id' short-circuits withBaseWidget's real widget-config
+  // fetch (see WidgetConfigProvider.getWidgetConfig) and resolves to `{}` —
+  // partialViewEnabled then comes out `undefined`, which now correctly
+  // defaults to enabled regardless of which merchant is selected in the
+  // toolbar or what that merchant's own backend config has configured.
+  args: {
+    widgetConfigId: 'fake-widget-config-id',
+  },
+  decorators: [
+    Story => (
+      <HardcopyProvider
+        hardcopyService={
+          new MockHardcopyService({ [WidgetTypeV3.FullPageSalesAgentV3]: partialViewHardcopy })
+        }
+      >
+        <Story />
+      </HardcopyProvider>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Partial view is enabled by default — submitting a question opens the conversation in a ' +
+          "closed/partial/full bottom sheet instead of taking over the whole screen, and the widget's " +
+          'own product grid stays visible above it. Self-contained (a fake widgetConfigId plus mocked ' +
+          "hardcopy) so it renders the same regardless of the toolbar's selected merchant.",
+      },
+    },
+  },
+};

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -23,30 +23,24 @@ import { useCallback } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
-const mockPrompts = [
-  'Loading prompt 1',
-  'Loading prompt 2',
-  'Loading prompt 3',
-  'Loading prompt 4',
-  'Loading prompt 5',
-];
-
-const mockHeadline = 'Loading...';
-const mockAnimatedText = ['Loading...'];
-
 const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
-  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading, isHardcopySettled } = props;
+
+  // Show the skeleton while the card is loading, or while its hardcopy hasn't arrived yet (a
+  // widget deferred until visible has none). Gate the "no content yet" case on the hardcopy
+  // NOT having settled — otherwise a request that finishes without content (a failed/timed-out
+  // fetch) would leave `hardcopyContent` undefined and pin the skeleton on forever. Once the
+  // hardcopy settles empty, fall through to the normal render (static-copy fallback / empty
+  // state) instead of an endless skeleton.
+  const showSkeleton = isLoading || (!hardcopyContent && !isHardcopySettled);
 
-  const hardCopyHeadline = hardcopyContent?.values?.headline as string | undefined;
-  const headline = isLoading ? mockHeadline : hardCopyHeadline || '';
+  const headline = (hardcopyContent?.values?.headline as string | undefined) || '';
 
-  const hardCopyAnimatedText = (hardcopyContent?.values?.animatedText as string[]) || [];
-  const animatedText = isLoading ? mockAnimatedText : hardCopyAnimatedText;
+  const animatedText = (hardcopyContent?.values?.animatedText as string[]) || [];
 
-  const hardCopyPrompts = (hardcopyContent?.values?.prompts as string[]) || [];
-  const prompts = isLoading ? mockPrompts : hardCopyPrompts;
+  const prompts = (hardcopyContent?.values?.prompts as string[]) || [];
 
   const hardCopyPlaceholder = hardcopyContent?.values?.placeholder as string | undefined;
   const placeholder = hardCopyPlaceholder;
@@ -141,6 +135,7 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
     <ProductCard
       theme={Theme.GLOBAL_CUSTOM}
       variant={variant}
+      isLoading={showSkeleton}
       imageSrc={imageSrc}
       fallbackColor={fallbackColor}
       headline={headline}

package/src/widgets/ProductCardWidget/__tests__/ProductCardWidget.test.tsx

@@ -10,8 +10,21 @@ const mockUseTrackComponentVisibleEvent = vi.fn(() => ({ isVisible: true }));
 
 vi.mock('@envive-ai/react-toolkit-v3/ProductCard', () => ({
   ProductCardVariant: { DARK: 'dark', LIGHT: 'light' },
-  ProductCard: ({ prompts, onSelect }: { prompts: string[]; onSelect: (text: string) => void }) => (
-    <div data-testid="product-card-mock">
+  // Expose isLoading (the widget's showSkeleton decision) so tests can assert the loading
+  // placeholder vs. rendered content across the deferred / resolved / failed fetch paths.
+  ProductCard: ({
+    prompts,
+    onSelect,
+    isLoading,
+  }: {
+    prompts: string[];
+    onSelect: (text: string) => void;
+    isLoading?: boolean;
+  }) => (
+    <div
+      data-testid="product-card-mock"
+      data-loading={String(Boolean(isLoading))}
+    >
       {prompts.map(text => (
         <button
           key={text}
@@ -151,3 +164,57 @@ describe('ProductCardWidget analytics', () => {
     });
   }, 5000);
 });
+
+describe('ProductCardWidget loading state', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const hardcopy = {
+    responseId: 'test-response-id',
+    language: 'en',
+    values: { prompts: ['Prompt 1', 'Prompt 2'] },
+    rawValues: { prompts: [{ id: 'id-1', value: 'Prompt 1' }] },
+  };
+
+  const loadingState = () => screen.getByTestId('product-card-mock').dataset.loading;
+
+  it('shows the skeleton while the hardcopy is pending, then renders content once it resolves', async () => {
+    let resolveHardcopy: (value: typeof hardcopy) => void = () => {};
+    mockGetHardcopy.mockReturnValue(
+      new Promise<typeof hardcopy>(resolve => {
+        resolveHardcopy = resolve;
+      }),
+    );
+
+    render(<ProductCardWidget widgetConfigId="loading-1" />);
+
+    // Hardcopy not received yet → skeleton.
+    await waitFor(() => expect(loadingState()).toBe('true'), { timeout: 3000 });
+
+    resolveHardcopy(hardcopy);
+
+    // Content arrived → skeleton gone.
+    await waitFor(() => expect(loadingState()).toBe('false'), { timeout: 3000 });
+    expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+  }, 5000);
+
+  it('renders content and drops the skeleton after a successful fetch', async () => {
+    mockGetHardcopy.mockResolvedValue(hardcopy);
+
+    render(<ProductCardWidget widgetConfigId="loading-2" />);
+
+    await waitFor(() => expect(loadingState()).toBe('false'), { timeout: 3000 });
+    expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+  }, 5000);
+
+  it('drops the skeleton after the hardcopy fetch fails instead of hanging on it forever', async () => {
+    // A rejected (or timed-out) hardcopy settles without content. The widget must fall through
+    // to the normal render rather than pinning the skeleton on indefinitely.
+    mockGetHardcopy.mockRejectedValue(new Error('hardcopy failed'));
+
+    render(<ProductCardWidget widgetConfigId="loading-3" />);
+
+    await waitFor(() => expect(loadingState()).toBe('false'), { timeout: 3000 });
+  }, 5000);
+});