Add a loader and improve the scroll bar

public/index.html

@@ -19,7 +19,14 @@
                         </form>
                         <button onclick="download()">Download Images</button>
                     </div>
-                    <div id="images-div" class="images-div"></div>
+                    <hr />
+                    <div class="loader-div" id="loader-div">
+                        <div class="loader" id="loader"></div>
+                        <h2>Scrapping in progress ...</h2>
+                    </div>
+                    <div class="scroll-div">
+                        <div id="images-div" class="images-div scroll-hidden"></div>
+                    </div>
                 </div>
             </main>
         </div>

public/script.js

@@ -3,6 +3,7 @@ const searchInput = document.getElementById("search-input");
 const searchForm = document.getElementById("search-form");
 const imagesDiv = document.getElementById("images-div");
 const imageTemplate = document.getElementById("image-template");
+const loaderDiv = document.getElementById("loader-div");
 let imagesUrls = [];
 
 starsCanvas(starsNumber);
@@ -87,6 +88,7 @@ async function getImagesURL(query, offset, count, smart) {
     const response = await fetch(url);
     const data = await response.json();
 
+    loaderDiv.classList.toggle("show");
     for (const url of data) {
         imagesUrls.push(url);
         const imageTemplateCopy = imageTemplate.content.cloneNode(true);
@@ -97,5 +99,6 @@ async function getImagesURL(query, offset, count, smart) {
 
 async function search() {
     imagesDiv.replaceChildren();
-    await getImagesURL(searchInput.value, 1, 1000, true);
+    loaderDiv.classList.toggle("show");
+    await getImagesURL(searchInput.value, 1, 1000, false);
 }

public/style.css

@@ -2,6 +2,8 @@
     margin: 0;
     box-sizing: border-box;
     font-family: "Segoe UI", sans-serif;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color) transparent;
 }
 
 :root {
@@ -17,6 +19,19 @@ body {
     overflow: hidden;
 }
 
+::-webkit-scrollbar {
+    width: 2px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 2px;
+}
+
 .app {
     display: flex;
     height: 100vh;
@@ -71,6 +86,12 @@ body {
     flex: 1;
 }
 
+.content hr {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: 10px 0;
+}
+
 .view {
     width: 100%;
     max-width: 1280px;
@@ -84,7 +105,7 @@ body {
     padding: 40px;
 
     z-index: 0;
-    overflow: auto;
+    overflow: hidden;
     backdrop-filter: blur(3px);
 }
 
@@ -94,6 +115,10 @@ body {
     gap: 20px;
 }
 
+.scroll-div {
+    overflow-y: scroll;
+}
+
 .stars-canvas {
     position: fixed;
     z-index: -1;
@@ -104,7 +129,6 @@ body {
     grid-template-columns: repeat(auto-fill, 150px);
     gap: 20px;
     justify-content: center;
-    margin-top: 50px;
 }
 
 .image-box {
@@ -125,3 +149,35 @@ body {
     height: 100%;
     object-fit: cover;
 }
+
+.loader {
+    border: 16px solid var(--transparent-white);
+    border-top: 16px solid var(--border-color);
+    border-radius: 50%;
+    width: 300px;
+    height: 300px;
+    animation: spin 2s linear infinite;
+    margin: 20px;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.loader-div {
+    display: none;
+    margin-top: 50px;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    flex-direction: column;
+}
+
+.loader-div.show {
+    display: flex;
+}