Refactor styles across components to utilize variable-based border-radius for consistency and improved maintainability. Added SkeletonUI component and corresponding styles for loading states.

app/src/styles/layout/loading.scss

@@ -5,6 +5,7 @@
   height: 100vh;
   width: 100vw;
   background: var(--background-color-solid);
+
   .loading-container {
     position: relative;
     height: 100%;
@@ -15,6 +16,7 @@
     justify-content: space-between;
     padding: 28px;
     z-index: 5;
+
     &::after {
       content: "";
       position: absolute;
@@ -26,22 +28,26 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      border-radius: 50%;
+      border-radius: #{$border-radius-circle};
       filter: blur(200px);
       z-index: -1;
     }
+
     .project-name {
       font-size: var(--font-size-regular);
     }
+
     .loading-hero-container {
       .logo {
         @include flex-center;
         width: 100%;
         margin-bottom: 35px;
+
         circle {
           fill: transparent;
         }
       }
+
       .content {
         font-family: #{$font-josefin-sans};
         font-size: #{$xxlarge};
@@ -51,6 +57,7 @@
         line-height: 2rem;
       }
     }
+
     .progress-container {
       .progress-value {
         font-family: #{$font-josefin-sans};
@@ -59,12 +66,14 @@
         margin-bottom: 22px;
         text-align: center;
       }
+
       .progress-indicator-container {
         height: 6px;
         width: 60vw;
         background: var(--highlight-accent-color);
         border-radius: #{$border-radius-small};
         position: relative;
+
         .progress-bar {
           height: 6px;
           background: var(--accent-color);
@@ -74,4 +83,4 @@
       }
     }
   }
-}
+}