Add a loader and improve the scroll bar

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;
+}