Fixed ui loading

web/src/app/app-routing.module.ts

@@ -4,12 +4,14 @@ import { NotFoundComponent } from "src/app/components/error/not-found/not-found.
 import { AuthGuard } from "src/app/core/guard/auth.guard";
 import { HomeComponent } from "src/app/components/home/home.component";
 import { RedirectComponent } from "src/app/components/redirect/redirect.component";
+import { LogoutComponent } from "src/app/components/logout/logout.component";
 
 const routes: Routes = [
   {
     path: "",
     component: HomeComponent,
   },
+  { path: "logout", component: LogoutComponent },
   {
     path: "admin",
     loadChildren: () =>

web/src/app/app.component.html

@@ -1,8 +1,8 @@
-<main *ngIf="isLoggedIn && showSidebar; else home">
+<main *ngIf="isLoggedIn && !hideUI; else home">
     <app-header></app-header>
 
     <div class="app">
-        <aside>
+        <aside *ngIf="showSidebar">
             <app-sidebar></app-sidebar>
         </aside>
         <section class="component">

web/src/app/app.component.ts

@@ -3,6 +3,7 @@ import { SidebarService } from "src/app/service/sidebar.service";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 import { AuthService } from "src/app/service/auth.service";
+import { GuiService } from "src/app/service/gui.service";
 
 @Component({
   selector: "app-root",
@@ -11,12 +12,14 @@ import { AuthService } from "src/app/service/auth.service";
 })
 export class AppComponent implements OnDestroy {
   showSidebar = false;
+  hideUI = false;
   isLoggedIn = false;
   unsubscribe$ = new Subject<void>();
 
   constructor(
     private sidebar: SidebarService,
     private auth: AuthService,
+    private gui: GuiService,
   ) {
     this.auth.loadUser();
 
@@ -29,6 +32,10 @@ export class AppComponent implements OnDestroy {
       .subscribe((visible) => {
         this.showSidebar = visible;
       });
+
+    this.gui.hideGui$.pipe(takeUntil(this.unsubscribe$)).subscribe((hide) => {
+      this.hideUI = hide;
+    });
   }
 
   ngOnDestroy() {

web/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { ErrorHandlingService } from "src/app/service/error-handling.service";
 import { HomeComponent } from "./components/home/home.component";
 import { RedirectComponent } from "./components/redirect/redirect.component";
 import { SettingsService } from "src/app/service/settings.service";
+import { LogoutComponent } from './components/logout/logout.component';
 
 if (environment.production) {
   Logger.enableProductionMode();
@@ -58,6 +59,7 @@ export function appInitializerFactory(
     SidebarComponent,
     HomeComponent,
     RedirectComponent,
+    LogoutComponent,
   ],
   imports: [
     BrowserModule,

web/src/app/components/redirect/redirect.component.ts

@@ -2,10 +2,11 @@ import { Component, OnInit } from "@angular/core";
 import { SidebarService } from "src/app/service/sidebar.service";
 import { Router } from "@angular/router";
 import { HttpClient } from "@angular/common/http";
-import { environment } from "src/environments/environment";
 import { ShortUrlDto } from "src/app/model/entities/short-url";
 import { SettingsService } from "src/app/service/settings.service";
 import { AppSettings } from "src/app/model/config/app-settings";
+import { GuiService } from "src/app/service/gui.service";
+import { SpinnerService } from "src/app/service/spinner.service";
 
 @Component({
   selector: "app-redirect",
@@ -23,8 +24,10 @@ export class RedirectComponent implements OnInit {
     private router: Router,
     private http: HttpClient,
     private settingsService: SettingsService,
+    private gui: GuiService,
   ) {
     this.sidebar.hide();
+    this.gui.hide();
   }
 
   ngOnInit() {

web/src/app/service/gui.service.ts

@@ -13,6 +13,8 @@ export class GuiService {
   isMobile$ = new BehaviorSubject<boolean>(this.isMobileByWindowWith());
   isTablet$ = new BehaviorSubject<boolean>(this.isTabletByWindowWith());
 
+  hideGui$ = new BehaviorSubject<boolean>(false);
+
   constructor(
     private router: Router,
     private sidebarService: SidebarService,
@@ -67,4 +69,12 @@ export class GuiService {
       return "rgb(" + r + ", " + g + ", " + b + ")";
     }
   }
+
+  public show() {
+    this.hideGui$.next(false);
+  }
+
+  public hide() {
+    this.hideGui$.next(true);
+  }
 }