feat(performance): Add a grid sample as a project to test performance optimizations (#16050)

Author: mddragnev

angular.json

@@ -478,6 +478,97 @@
           }
         }
       }
+    },
+    "igniteui-angular-performance": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/igniteui-angular-performance",
+      "sourceRoot": "projects/igniteui-angular-performance/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "projects/igniteui-angular-performance/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/igniteui-angular-performance/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "projects/igniteui-angular-performance/src/assets"
+            ],
+            "styles": [
+              "projects/igniteui-angular-performance/src/styles.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "igniteui-angular-performance:build:production"
+            },
+            "development": {
+              "buildTarget": "igniteui-angular-performance:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/igniteui-angular-performance/tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/igniteui-angular-performance/public"
+              }
+            ],
+            "styles": [
+              "projects/igniteui-angular-performance/src/styles.scss"
+            ]
+          }
+        }
+      }
     }
   },
   "cli": {

package.json

@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve --open --hmr",
     "start:elements": "ng serve --project igniteui-angular-elements",
+    "start:performance": "ng serve --project igniteui-angular-performance",
     "build": "ng build --configuration production",
     "test": "ng test igniteui-angular",
     "lint": "ng lint",

projects/igniteui-angular-performance/public/favicon.ico

@@ -0,0 +1,8 @@
+<main class="wrapper">
+  <div class="routes">
+    <button igxButton="contained" routerLink="/">1K records</button>
+    <button igxButton="contained" routerLink="/grid-100k">100K records</button>
+    <button igxButton="contained" routerLink="/grid-1m">1M records</button>
+  </div>
+  <router-outlet />
+</main>

projects/igniteui-angular-performance/src/app/app.component.html

@@ -0,0 +1,18 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.routes {
+    padding: 1rem;
+    display: flex;
+    gap: 1rem;
+}

projects/igniteui-angular-performance/src/app/app.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/igniteui-angular-performance/src/app/app.component.spec.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { IgxButtonDirective } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-root',
+    imports: [RouterOutlet, IgxButtonDirective, RouterLink],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss'
+})
+export class AppComponent {
+
+}

projects/igniteui-angular-performance/src/app/app.component.ts

@@ -0,0 +1,14 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideAnimations()
+  ]
+};

projects/igniteui-angular-performance/src/app/app.config.ts

@@ -0,0 +1,21 @@
+import { Routes } from '@angular/router';
+import { GridComponent } from './grid/grid.component';
+
+export const routes: Routes = [
+    {
+        path: "grid-100k",
+        component: GridComponent,
+        data: { rows: 100_000 }
+    },
+    {
+        path: "grid-1m",
+        component: GridComponent,
+        data: { rows: 1_000_000 }
+    },
+    {
+        path: "",
+        pathMatch: 'full',
+        component: GridComponent,
+        data: { rows: 1000 }
+    }
+];