From a934fea940a3c8b2fda89cf991e7fcbcc9ca2447 Mon Sep 17 00:00:00 2001
From: svensken <vladfolder@gmail.com>
Date: Thu, 3 Nov 2022 03:40:09 +0300
Subject: [PATCH] loading screen

---
 src/app/app.module.ts                         |  2 +
 .../loading-screen.component.html             |  8 +-
 .../loading-screen.component.scss             | 79 +++++++++++++++++++
 .../loading-screen.component.ts               |  4 +-
 src/assets/icon_mask.svg                      |  3 +
 src/styles.scss                               |  1 +
 6 files changed, 93 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/icon_mask.svg

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ce9ca93..de44eb7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,6 +15,7 @@ import { PlaygroundModule } from './components/playground/playground.module';
 import { SandboxModule } from './components/sandbox/sandbox.module';
 import { SignInModule } from './components/sign-in/sign-in.module';
 import { LoadingScreenComponent } from './components/loading-screen/loading-screen.component';
+import { UiModule } from 'projects/ui/src/lib/ui.module'
 
 @NgModule({
   declarations: [AppComponent, LoadingScreenComponent],
@@ -27,6 +28,7 @@ import { LoadingScreenComponent } from './components/loading-screen/loading-scre
     PlaygroundModule,
     SandboxModule,
     SignInModule,
+    UiModule
   ],
   providers: [
     { provide: APP_BASE_HREF, useValue: '/' },
diff --git a/src/app/components/loading-screen/loading-screen.component.html b/src/app/components/loading-screen/loading-screen.component.html
index c0da824..64c0bfe 100644
--- a/src/app/components/loading-screen/loading-screen.component.html
+++ b/src/app/components/loading-screen/loading-screen.component.html
@@ -1,2 +1,6 @@
-<p>loading-screen works!</p>
-<p>{{status}}</p>
+<div class="icon">
+  <!-- <img src="assets/games/garrysmod/icon.png" width="100%"> -->
+</div>
+<div class="status">
+  <skirda-heading size="4">{{status ?? 'Status message'}}</skirda-heading>
+</div>
diff --git a/src/app/components/loading-screen/loading-screen.component.scss b/src/app/components/loading-screen/loading-screen.component.scss
index e69de29..0194221 100644
--- a/src/app/components/loading-screen/loading-screen.component.scss
+++ b/src/app/components/loading-screen/loading-screen.component.scss
@@ -0,0 +1,79 @@
+:host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  gap: 2.75rem;
+
+  @keyframes pulse {
+    from {
+      scale: 0.98;
+    }
+    to {
+      scale: 1.02;
+    }
+  }
+
+  @keyframes loaderPulse {
+    from {
+      opacity: 1;
+      scale: 0;
+      background-color: #d6282800;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    to {
+      opacity: 0;
+      scale: 3;
+      background-color: #d6282899;
+    }
+  }
+
+  .icon {
+    animation: pulse 1s ease 0s infinite alternate;
+    width: 140px;
+    height: 140px;
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 0.1);
+    mask-image: url('/assets/icon_mask.svg');
+    mask-size: cover;
+    user-select: none;
+    pointer-events: none;
+    transform-origin: bottom center;
+  }
+
+
+  .status {
+    position: relative;
+
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      display: block;
+      left: 50%;
+      top: 2px;
+      translate: -50% -50%;
+      width: 24px;
+      height: 24px;
+      border: 1.5px solid var(--sk-primary);
+      border-radius: 50%;
+      animation: loaderPulse 1.4s linear -0.7s infinite forwards;
+      mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 75%);
+      z-index: 0;
+      box-shadow: inset 0px 0.25px 0px 0px rgba(255, 255, 255, 0.5);
+    }
+
+    &:after {
+      animation-delay: 0s;
+      border: 1.5px solid var(--sk-secondary);
+    }
+
+    skirda-heading {
+      position: relative;
+      z-index: 3;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/components/loading-screen/loading-screen.component.ts b/src/app/components/loading-screen/loading-screen.component.ts
index 270dc19..036e06b 100644
--- a/src/app/components/loading-screen/loading-screen.component.ts
+++ b/src/app/components/loading-screen/loading-screen.component.ts
@@ -5,11 +5,11 @@ import { Component, OnInit, Input } from '@angular/core';
   styleUrls: ['./loading-screen.component.scss']
 })
 export class LoadingScreenComponent implements OnInit {
-  @Input() status!:string
+  @Input() status?: string
 
   constructor() { }
 
-  SetStatus(newStatus:string){
+  SetStatus(newStatus: string){
     this.status = newStatus
   }
 
diff --git a/src/assets/icon_mask.svg b/src/assets/icon_mask.svg
new file mode 100644
index 0000000..59ab6ac
--- /dev/null
+++ b/src/assets/icon_mask.svg
@@ -0,0 +1,3 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.70215 12.9365C0 18.1384 0 24.9722 0 38.6399V51.3601C0 65.0278 0 71.8616 2.70215 77.0635C4.979 81.4468 8.55322 85.021 12.9365 87.2979C18.1382 90 24.9722 90 38.6401 90H51.3599C65.0278 90 71.8618 90 77.0635 87.2979C81.4468 85.021 85.021 81.4468 87.2979 77.0635C90 71.8616 90 65.0278 90 51.3601V38.6399C90 24.9722 90 18.1384 87.2979 12.9365C85.021 8.55322 81.4468 4.979 77.0635 2.70215C71.8618 0 65.0278 0 51.3599 0H38.6401C24.9722 0 18.1382 0 12.9365 2.70215C8.55322 4.979 4.979 8.55322 2.70215 12.9365Z" fill="black"/>
+</svg>
diff --git a/src/styles.scss b/src/styles.scss
index 9392e23..ca210b2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,7 @@ html, body {
   margin: 0;
   font-family: var(--font);
   line-height: 90%;
+  user-select: none;
 }
 
 button, input, textarea {