Fix Brand Recommendations animation on second time appearance

packages/x-components/src/x-modules/queries-preview/components/query-preview.vue

@@ -35,10 +35,8 @@
   import Vue from 'vue';
   import { Component, Prop, Inject, Watch } from 'vue-property-decorator';
   import { Dictionary } from '@empathyco/x-utils';
-  import { SearchRequest, Result } from '@empathyco/x-types';
+  import { Result, SearchRequest } from '@empathyco/x-types';
   import { State } from '../../../components/decorators/store.decorators';
-  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { XProvide } from '../../../components/decorators/injection.decorators';
   import { xComponentMixin } from '../../../components/x-component.mixin';
   import { NoElement } from '../../../components/no-element';
   import { RequestStatus } from '../../../store';
@@ -49,6 +47,7 @@
   import { createOrigin } from '../../../utils/origin';
   import { debounce } from '../../../utils/debounce';
   import { DebouncedFunction } from '../../../utils';
+  import { LIST_ITEMS_KEY, XProvide } from '../../../components';
 
   /**
    * Retrieves a preview of the results of a query and exposes them in the default slot,
@@ -98,6 +97,15 @@
     @Prop({ default: 0 })
     public debounceTimeMs!: number;
 
+    /**
+     * Controls whether the QueryPreview should be removed from the state
+     * when the component is destroyed.
+     *
+     * @public
+     */
+    @Prop({ default: true })
+    public clearOnDestroy!: boolean;
+
     /**
      * The results preview of the queries preview mounted.
      * It is a dictionary, indexed by the query preview query.
@@ -205,11 +213,17 @@
     /**
      * Cancels the (remaining) requests when the component is destroyed
      * via the `debounce.cancel()` method.
+     * If the prop 'clearOnDestroy' is set to true, it also removes the QueryPreview
+     * from the state when the component is destroyed.
      *
      * @internal
      */
     protected beforeDestroy(): void {
       this.emitQueryPreviewRequestUpdated.cancel();
+
+      if (this.clearOnDestroy) {
+        this.$x.emit('QueryPreviewUnmountedHook', this.query, { priority: 0, replaceable: false });
+      }
     }
 
     /**

packages/x-components/src/x-modules/queries-preview/events.types.ts

@@ -17,4 +17,8 @@ export interface QueriesPreviewXEvents {
    * Payload: The query whose preview has been removed.
    */
   QueryPreviewUnmountedHook: string;
+  /**
+   * The component that shows a Query preview has been destroyed.
+   */
+  QueriesPreviewDestroyedHook: void;
 }

packages/x-components/src/x-modules/queries-preview/wiring.ts

@@ -37,7 +37,6 @@ export const fetchAndSaveQueryPreviewWire = wireDispatch('fetchAndSaveQueryPrevi
  *
  * @public
  */
-
 export const clearQueryPreviewWire = wireCommit('clearQueryPreview');
 
 /**