Added a spinner to block the widget when AI search is happening

Author: Herve Tribouilloy

vite_project/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "widget-intent-discovery",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

vite_project/package.json

@@ -9,6 +9,7 @@ import {AttributeLayer} from "./AttributeLayer.tsx";
 import {IntentDiscoveryOptions} from "./IntentDiscoveryOptions.tsx";
 import {ProductRecommendations} from "./ProductRecommendations.tsx";
 import {activity} from "../activity";
+import {useIntentDecision} from "../hooks/domain/useIntentDecision.tsx";
 
 export interface Props {
     config: IntentDiscoveryDataConfig
@@ -21,6 +22,7 @@ export const IntentDiscovery = ({ config, categoryData }: Props) => {
         useFindAttributeLayer(categoryData);
 
     const [showRightColumn, setShowRightColumn] = useState(false)
+    const { shouldSearch } = useIntentDecision(attributeLayerData, config)
 
     useEffect(() => {
         if (!attributeLayerData?.aggregations) return
@@ -34,28 +36,36 @@ export const IntentDiscovery = ({ config, categoryData }: Props) => {
     activity('attribute-layer', 'Attribute Layer', attributeLayerData);
 
     return (
-        <div className={showRightColumn ? "re-intent-layout re-intent-layout--two" : "re-intent-layout"}>
-            <div className="re-intent-col re-intent-col--left">
-                <AttributeLayer
-                    config={config}
-                    categoryData={categoryData}
-                    attributeLayerData={attributeLayerData}
-                />
-                <IntentDiscoveryOptions
-                    config={config}
-                    categoryData={categoryData}
-                    attributeLayerData={attributeLayerData}
-                />
-            </div>
+        <>
+            {shouldSearch && (
+                <div className="intent-evaluation-overlay">
+                    <Spinner />
+                    <p>Evaluating your preferences…</p>
+                </div>
+            )}
+            <div className={showRightColumn ? "re-intent-layout re-intent-layout--two" : "re-intent-layout"}>
+                <div className="re-intent-col re-intent-col--left">
+                    <AttributeLayer
+                        config={config}
+                        categoryData={categoryData}
+                        attributeLayerData={attributeLayerData}
+                    />
+                    <IntentDiscoveryOptions
+                        config={config}
+                        categoryData={categoryData}
+                        attributeLayerData={attributeLayerData}
+                    />
+                </div>
 
-            <div className="re-intent-col re-intent-col--right">
-                <ProductRecommendations
-                    config={config}
-                    categoryData={categoryData}
-                    attributeLayerData={attributeLayerData}
-                    onVisibilityChange={setShowRightColumn}
-                />
+                <div className="re-intent-col re-intent-col--right">
+                    <ProductRecommendations
+                        categoryData={categoryData}
+                        attributeLayerData={attributeLayerData}
+                        onVisibilityChange={setShowRightColumn}
+                        shouldSearch={shouldSearch}
+                    />
+                </div>
             </div>
-        </div>
+        </>
     );
 };

vite_project/src/components/IntentDiscovery.tsx

@@ -1,28 +1,23 @@
 import type {MagentoProducts} from "../hooks/infra/useProductAttributeLayer.tsx";
-import type {IntentDiscoveryDataConfig} from "../domain/intent-discovery.types.ts";
 import {useAnalyseSearch} from "../hooks/domain/useAnalyseSearch.tsx";
 import type {MagentoCategory} from "../types/infra/magento/category.types.ts";
 import {Spinner} from "./global/Spinner.tsx";
 import {SuggestionContainer} from "./Suggestions/SuggestionContainer.tsx";
 import {useEffect} from "react";
 
 export interface Props {
-    config: IntentDiscoveryDataConfig
     categoryData: MagentoCategory
     attributeLayerData: MagentoProducts
     onVisibilityChange?: (visible: boolean) => void
+    shouldSearch: boolean
 }
 
 export const ProductRecommendations = ({
-   config,
    categoryData,
    attributeLayerData,
-   onVisibilityChange
+   onVisibilityChange,
+   shouldSearch
 }: Props) => {
-    const threshold = config.ai.matchThreshold
-    const total = attributeLayerData?.total_count ?? 0
-    const shouldSearch = total <= threshold;
-
     const { aiRecommendation, searchLoading, error } =
         useAnalyseSearch(
             attributeLayerData?.aggregations,

vite_project/src/components/ProductRecommendations.tsx

@@ -0,0 +1,12 @@
+import type {MagentoProducts} from "../infra/useProductAttributeLayer.tsx";
+import type {IntentDiscoveryDataConfig} from "../../domain/intent-discovery.types.ts";
+
+export const useIntentDecision = (attributeLayerData: MagentoProducts | undefined, config: IntentDiscoveryDataConfig) => {
+    const threshold = config.ai.matchThreshold
+    const total = attributeLayerData?.total_count ?? 0
+
+    return {
+        total,
+        shouldSearch: total <= threshold
+    }
+}

vite_project/src/hooks/domain/useIntentDecision.tsx

@@ -160,4 +160,20 @@
     font-size: 13px;
     color: #4b5563;
     line-height: 1.35;
+}
+
+.intent-evaluation-container {
+    position: relative;
+}
+
+.intent-evaluation-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(255,255,255,0.85);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    font-size: 16px;
 }