listing flickering correction

rnunez80 · Dec 20, 2024 · 8d834b3 · 8d834b3
1 parent 7c6cfe2
commit 8d834b3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/Advanced.css b/src/Advanced.css
@@ -474,3 +474,23 @@ p.effectiveDate {
   pointer-events: none;
   outline: none; /* Remove focus outlines */
 }
+
+/* withQuerystringResults.css */
+
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 500ms ease-in-out;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 500ms ease-in-out;
+}
diff --git a/src/CommonItemRenderer.js b/src/CommonItemRenderer.js
@@ -109,7 +109,7 @@ const CommonItemRenderer = ({
   );
 
   return (
-    <>
+    <div className='fade-in loaded'>
       {processedItems.map(item => (
         <div key={item['@id']} className='ui one column grid advanced-item'>
           <div className={`column ${imageSide}`}>
@@ -194,7 +194,7 @@ const CommonItemRenderer = ({
           </div>
         </div>
       ))}
-    </>
+    </div>
   );
 };