From 1a38703c3de32a444eac4e4f75501b60e4bfb2ca Mon Sep 17 00:00:00 2001
From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com>
Date: Mon, 8 Apr 2024 17:11:30 -0400
Subject: [PATCH] fadeout

---
 .../blocks/search-results/search-results.css  | 23 ++++++++++++++-----
 .../blocks/search-results/search-results.js   | 15 ++++++++----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/cigaradvisor/blocks/search-results/search-results.css b/cigaradvisor/blocks/search-results/search-results.css
index 873af61..1eed0fc 100644
--- a/cigaradvisor/blocks/search-results/search-results.css
+++ b/cigaradvisor/blocks/search-results/search-results.css
@@ -2,11 +2,22 @@
    text-align: center;
 }
 
-.loading-image-container {
+.search-results.block {
+   position: relative;
+   min-height: 200vh;
+}
+
+.search-results.block .loading-image-container {
+   position: absolute;
+   top: 40px;
+   left: 0;
+   z-index: 1000;
+   width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
+   margin: 0 auto;
 }
 
 .search-results.block .loading-image {
@@ -25,14 +36,14 @@
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
-   }
+}
 
-   @keyframes rotation {
+@keyframes rotation {
    0% {
-       transform: rotate(0deg);
+      transform: rotate(0deg);
    }
 
    100% {
-       transform: rotate(360deg);
+      transform: rotate(360deg);
    }
-   } 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/cigaradvisor/blocks/search-results/search-results.js b/cigaradvisor/blocks/search-results/search-results.js
index 11e949c..b43ce05 100644
--- a/cigaradvisor/blocks/search-results/search-results.js
+++ b/cigaradvisor/blocks/search-results/search-results.js
@@ -18,12 +18,19 @@ async function processSearchResults(articles, wrapper, limit, articlesCount) {
   await renderPage(wrapper, articles, limit, articlesCount);
   const loadingImageContainer = document.querySelector('.loading-image-container');
   const articleListWrapper = document.querySelector('.article-list-wrapper');
+  loadingImageContainer.style.transition = 'opacity 2s';
+  loadingImageContainer.style.opacity = 0.5;
   articleListWrapper.style.transition = 'opacity 2s';
-  articleListWrapper.style.opacity = 1;
+  articleListWrapper.style.opacity = 0.5;
   articleListWrapper.style.display = 'block';
-  loadingImageContainer.style.transition = 'opacity 2s';
-  loadingImageContainer.style.opacity = 0;
-  loadingImageContainer.style.display = 'none';
+
+  setTimeout(
+    () => {
+      loadingImageContainer.style.display = 'none';
+      articleListWrapper.style.opacity = 1;
+    },
+    1000,
+  );
 }
 
 async function handleSearch(searchValue, block, limit) {