From 321140a08ad3e0245f5f0bef657bebc7cfc747ef Mon Sep 17 00:00:00 2001
From: Aminejv <elouartinra@hotmail.com>
Date: Mon, 9 Aug 2021 09:59:20 +0100
Subject: [PATCH] feat(CollectionPreview): display popup when only hovering
 over title and description

---
 .../core/CollectionPreviewBlock/index.js      | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/components/core/CollectionPreviewBlock/index.js b/components/core/CollectionPreviewBlock/index.js
index 5b7c01ac..71f885c3 100644
--- a/components/core/CollectionPreviewBlock/index.js
+++ b/components/core/CollectionPreviewBlock/index.js
@@ -120,31 +120,31 @@ export default function CollectionPreview({ collection, viewer, owner, onAction
             </motion.div>
           </Preview>
 
-          <motion.article
-            css={STYLES_DESCRIPTION}
-            onMouseMove={showDescription}
-            onMouseLeave={hideDescription}
-          >
+          <motion.article css={STYLES_DESCRIPTION}>
             <div style={{ position: "relative", paddingTop: 9 }}>
               <H5 nbrOflines={1} style={{ visibility: "hidden" }}>
                 {title}
               </H5>
 
-              <div ref={descriptionRef}>
-                <P3
-                  style={{ paddingTop: 3, visibility: "hidden" }}
-                  nbrOflines={1}
-                  color="textGrayDark"
-                >
-                  {description}
-                </P3>
-              </div>
+              {description && (
+                <div ref={descriptionRef}>
+                  <P3
+                    style={{ paddingTop: 3, visibility: "hidden" }}
+                    nbrOflines={1}
+                    color="textGrayDark"
+                  >
+                    {description}
+                  </P3>
+                </div>
+              )}
 
               <motion.div
                 css={STYLES_INNER_DESCRIPTION}
                 initial={false}
                 animate={isDescriptionVisible ? "hovered" : "initial"}
                 variants={animationController.containerVariants}
+                onMouseMove={showDescription}
+                onMouseLeave={hideDescription}
               >
                 <H5 color="textBlack" nbrOflines={1} title={title}>
                   {title}
@@ -283,10 +283,11 @@ const useAnimateDescription = ({
 
   useMounted(() => {
     if (isDescriptionVisible) {
-      descriptionControls.start({ opacity: 1, transition: { delay: 0.2 } });
+      descriptionControls.start({ visibility: "initial", opacity: 1, transition: { delay: 0.2 } });
       return;
     }
-    descriptionControls.set({ opacity: 0 });
+
+    descriptionControls.set({ opacity: 0, visibility: "hidden" });
   }, [isDescriptionVisible]);
 
   return { containerVariants, descriptionControls };