Recommendations: Integration Inside a Popup

Sometimes integrating our recommendation widgets inside of a popup can cause an issue, for example when the popup is animated and by default set to display: none and on a click set to display: block.

We could solve this like shown in the following example below:

@keyframes popup-tracking {
    opacity: 1;
    opacity: 1;

// popup status changes from not-active to active
  animation: popup-tracking .1s linear;
 * @module layouts/Recommendation/Slider
import React from 'react';
// some more imports

// add this event listener
document.addEventListener('animationend', (e) => {
  if(e && e.animationName === 'popup-tracking') window.dispatchEvent(new Event('resize'));

// ... some code

export default compose(
  // some code