Merge pull request #19899 from overleaf/ii-bs5-loading-page

[web] BS5 projects page loading screen

GitOrigin-RevId: d204c05b7245393b0d9e10fa885e844e4ce43e62

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -1,3 +1,4 @@
 @import 'account-settings';
 @import 'project-list';
 @import 'sidebar-v2-dash-pane';
+@import 'editor';

services/web/frontend/stylesheets/bootstrap-5/pages/editor.scss

@@ -0,0 +1,60 @@
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.loading-screen-brand-container {
+  width: 15%;
+  min-width: 200px;
+  text-align: center;
+}
+
+.loading-screen-brand {
+  position: relative;
+  width: 100%;
+  padding-top: 115.44%;
+  height: 0;
+  background: url(../../../../public/img/ol-brand/overleaf-o-grey.svg) no-repeat
+    bottom / 100%;
+
+  &::after {
+    content: '';
+    position: absolute;
+    height: inherit;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: url(../../../../public/img/ol-brand/overleaf-o.svg) no-repeat
+      bottom / 100%;
+    transition: height 0.5s;
+  }
+}
+
+.loading-screen-label {
+  margin: 0 !important;
+  padding-top: var(--spacing-09);
+  font-family: $font-family-serif;
+  font-size: var(--font-size-07) !important;
+  color: var(--content-secondary);
+}
+
+.loading-screen-ellip {
+  animation: blink 1.4s both infinite;
+
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss

@@ -595,6 +595,18 @@
       }
     }
   }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: calc(100vh - #{$header-height});
+
+    .loading-screen-brand-container {
+      margin: 0 auto;
+    }
+  }
 }
 
 /* stylelint-disable selector-class-pattern */