feat: create synchronization message

src/app/ui/pages/main/main.component.html

@@ -11,5 +11,9 @@
     <nb-layout-column>
         <app-toolbar></app-toolbar>
         <router-outlet></router-outlet>
+        <nb-alert *ngIf="shouldShowSynchronizationMessage" status="warning" closable class="synchronization-message"
+                  (close)="closeSynchronizationMessage()">
+            {{ 'PAGES.MAIN.SYNCHRONIZATION_MESSAGE' | translate}}
+        </nb-alert>
     </nb-layout-column>
 </nb-layout>

src/app/ui/pages/main/main.component.scss

@@ -16,3 +16,11 @@ nb-layout-column {
 app-main-menu {
     padding-bottom: 15rem;
 }
+
+.synchronization-message {
+    position: sticky;
+    bottom: 0.5rem;
+    margin-left: 10rem;
+    margin-right: 10rem;
+    z-index: 1;
+}

src/app/ui/pages/main/main.component.ts

@@ -5,4 +5,10 @@ import { Component } from '@angular/core';
     templateUrl: './main.component.html',
     styleUrls: ['./main.component.scss'],
 })
-export class MainComponent {}
+export class MainComponent {
+    shouldShowSynchronizationMessage = true;
+
+    closeSynchronizationMessage(): void {
+        this.shouldShowSynchronizationMessage = false;
+    }
+}

src/app/ui/pages/main/main.module.ts

@@ -3,10 +3,16 @@ import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
 
 import { MainComponent } from './main.component';
-import { NbLayoutModule, NbSidebarModule } from '@nebular/theme';
+import {
+    NbAlertModule,
+    NbCardModule,
+    NbLayoutModule,
+    NbSidebarModule,
+} from '@nebular/theme';
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { MainMenuModule } from '../../components/main-menu/main-menu.module';
 import { ToolbarModule } from '../../components/toolbar/toolbar.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 const routes: Routes = [
@@ -81,6 +87,11 @@ const routes: Routes = [
         NbLayoutModule,
         NbEvaIconsModule,
         NbSidebarModule.forRoot(),
+        NbCardModule,
+        NbAlertModule,
+
+        // Other
+        TranslateModule.forChild(),
     ],
 })
 export class MainModule {}

src/assets/i18n/en.json

@@ -66,7 +66,8 @@
                 "INTERNET": "Internet and Communication",
                 "UTILITY": "Utility and Productivity",
                 "MISC": "Miscellaneous"
-            }
+            },
+            "SYNCHRONIZATION_MESSAGE": "App Outlet is synchronizing its database. It can affect the search performance. When synchronization ends, it will back to normal"
         },
         "SEARCH": {
             "NO_RESULTS_FOUND": "No results found",