improve performance

Author: Fxdonad

src/app/app.config.ts

@@ -21,6 +21,7 @@ import { modalNoticeReducer } from './shared/store/modal-notice-state/modal-noti
 import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
 import { provideLottieOptions } from 'ngx-lottie';
 import { variableReducer } from './shared/store/variable-state/variable.reducer';
+import { CustomPreloadStrategy } from './core/strategies/custom-preload.strategy';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -39,7 +40,7 @@ export const appConfig: ApplicationConfig = {
     }),
     provideAnimations(),
     provideMarkdown(),
-    provideRouter(routes, withPreloading(PreloadAllModules)),
+    provideRouter(routes, withPreloading(CustomPreloadStrategy)),
     importProvidersFrom(MarkdownModule.forRoot()),
   ],
 };

src/app/app.routes.ts

@@ -6,6 +6,7 @@ import { AppLayoutComponent } from './layouts/layout-pages/app-layout/app-layout
 import { AdminLayoutComponent } from './layouts/layout-pages/admin-layout/admin-layout';
 // import { RoleGuard } from './core/guards/router-protected/role.guard';
 import { PostModule } from './features/post/post.module';
+import { LandingModule } from './features/landing/landing.module';
 
 export const routes: Routes = [
   //Để test
@@ -76,7 +77,7 @@ export const routes: Routes = [
   {
     path: 'auth',
     component: AuthLayoutComponent,
-    data: { skipBreadcrumb: true },
+    data: { skipBreadcrumb: true, preload: true },
     children: [
       {
         path: 'identity',
@@ -93,10 +94,10 @@ export const routes: Routes = [
     children: [
       {
         path: '',
-        loadChildren: () =>
-          import('./features/landing/landing.module').then(
-            (m) => m.LandingModule
-          ),
+        loadChildren: () => LandingModule,
+        // import('./features/landing/landing.module').then(
+        //   (m) => m.LandingModule
+        // ),
         title: 'CodeCampus',
       },
       {
@@ -115,7 +116,8 @@ export const routes: Routes = [
       },
       {
         path: 'post-features',
-        loadChildren: () => PostModule, //Load đầu tiên k dùng lazyload
+        loadChildren: () =>
+          import('./features/post/post.module').then((m) => m.PostModule), //Load đầu tiên k dùng lazyload
       },
       {
         path: 'resource-learning',
@@ -153,6 +155,7 @@ export const routes: Routes = [
           ),
       },
     ],
+    data: { preload: true },
   },
 
   {
@@ -200,6 +203,7 @@ export const routes: Routes = [
         data: { breadcrumb: 'Quản lý tài nguyên' },
       },
     ],
+    data: { preload: false },
   },
 
   {

src/app/core/router-manager/horizontal-menu.ts

@@ -36,6 +36,7 @@ export function getNavHorizontalItems(roles: string[]): SidebarItem[] {
       path: '/codecampus-statistics/admin-exercise-statistics',
       label: 'Thống kê',
       icon: 'fas fa-chart-bar',
+      needHidden: !(roles.length !== 0),
     },
     {
       id: 'management',

src/app/core/strategies/custom-preload.strategy.ts

@@ -0,0 +1,11 @@
+import { PreloadingStrategy, Route } from '@angular/router';
+import { Observable, of } from 'rxjs';
+
+export class CustomPreloadStrategy implements PreloadingStrategy {
+  preload(route: Route, load: () => Observable<any>): Observable<any> {
+    if (route.data && route.data['preload']) {
+      return load();
+    }
+    return of(null);
+  }
+}

src/app/features/organization/pages/organization-management/organization-management.component.html

@@ -34,7 +34,14 @@ <h2>Quản lý Tổ chức</h2>
   </div>
 
   @if (loading) {
-  <div class="loading">Đang tải dữ liệu...</div>
+  <div class="no-data">
+    <ng-lottie
+      [options]="lottieOptionsLoading"
+      style="width: 200px; height: 200px"
+    >
+    </ng-lottie>
+    <p>Đang load nội dung, xin chờ...</p>
+  </div>
   } @if (!loading && !orgs.length) {
   <div class="no-data">
     <ng-lottie [options]="lottieOptions" style="width: 200px; height: 200px">

src/app/features/organization/pages/organization-management/organization-management.component.ts

@@ -18,7 +18,10 @@ import {
   OrganizationResponse,
 } from '../../../../core/models/organization.model';
 import { PaginationComponent } from '../../../../shared/components/fxdonad-shared/pagination/pagination.component';
-import { lottieOptions2 } from '../../../../core/constants/value.constant';
+import {
+  lottieOptions2,
+  lottieOptionsLoading1,
+} from '../../../../core/constants/value.constant';
 import { LottieComponent } from 'ngx-lottie';
 import { OrganizationCreateModalComponent } from '../../organization-component/organization-create-modal/organization-create-modal.component';
 import { Router } from '@angular/router';
@@ -51,6 +54,7 @@ export class OrganizationManagementComponent implements OnInit, OnDestroy {
   selectedOrgId: string | null = null;
 
   lottieOptions = lottieOptions2;
+  lottieOptionsLoading = lottieOptionsLoading1;
 
   // Pagination state
   page = 1;

src/app/features/statistics/statistics-routing.module.ts

@@ -36,6 +36,8 @@ const routes: Routes = [
       },
       //thêm vào đây
     ],
+    data: { roles: ['STUDENT', 'TEACHER', 'ADMIN'] },
+    canActivate: [RoleGuard],
   },
 ];