fadeout

hlxsites · Apr 8, 2024 · 1a38703 · 1a38703
1 parent 7dd5909
commit 1a38703
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git 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);
    }
-   } 
+}
diff --git 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) {