perf(startup): optimize initial bundle size

src/app/app.component.html

@@ -1,5 +1,5 @@
 @defer {
 <rp-layout />
-} @loading (after 100ms; minimum 2s) {
+} @placeholder (minimum 2s) {
 <rp-loading />
 }

src/app/app.component.spec.ts

@@ -14,10 +14,6 @@ import {
   MobileService,
   MobileServiceMock,
 } from './shared/data-access/mobile.service';
-import {
-  PaletteService,
-  PaletteServiceMock,
-} from './shared/data-access/palette.service';
 import { PwaService, PwaServiceMock } from './shared/data-access/pwa.service';
 import {
   ThemeService,
@@ -29,32 +25,25 @@ import {
 } from './shared/data-access/version.service';
 
 describe('AppComponent', () => {
-  let paletteService: PaletteServiceMock;
-
   let app: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
 
   beforeEach(async () => {
-    paletteService = new PaletteServiceMock();
-
     await TestBed.configureTestingModule({
       imports: [AppComponent, TranslateModule.forRoot()],
       providers: [
         { provide: ActivatedRoute, useValue: {} },
         // Explicit providers
-        { provide: PaletteService, useValue: paletteService },
         { provide: VersionService, useClass: VersionServiceMock },
-        { provide: PwaService, useClass: PwaServiceMock },
         // Implicit providers from LayoutComponent
         { provide: MobileService, useClass: MobileServiceMock },
         { provide: ThemeService, useClass: ThemeServiceMock },
         { provide: AnalyticsService, useClass: AnalyticsServiceMock },
         { provide: LanguageService, useClass: LanguageServiceMock },
+        { provide: PwaService, useClass: PwaServiceMock },
       ],
     }).compileComponents();
 
-    spyOn(paletteService, 'loadPaletteFromLocalStorage');
-
     fixture = TestBed.createComponent(AppComponent);
     app = fixture.componentInstance;
     fixture.detectChanges();
@@ -63,8 +52,4 @@ describe('AppComponent', () => {
   it('should create the app', () => {
     expect(app).toBeTruthy();
   });
-
-  it('should load palette on startup', () => {
-    expect(paletteService.loadPaletteFromLocalStorage).toHaveBeenCalled();
-  });
 });

src/app/app.component.ts

@@ -1,8 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { LayoutComponent } from './layout/layout.component';
 import { LoadingComponent } from './loading/loading.component';
-import { PaletteService } from './shared/data-access/palette.service';
-import { PwaService } from './shared/data-access/pwa.service';
+import { VersionService } from './shared/data-access/version.service';
 
 @Component({
   selector: 'rp-root',
@@ -11,10 +10,6 @@ import { PwaService } from './shared/data-access/pwa.service';
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  private readonly _paletteService = inject(PaletteService);
-  private readonly _pwaService = inject(PwaService);
-
-  constructor() {
-    this._paletteService.loadPaletteFromLocalStorage();
-  }
+  // This service gets injected here to print the version number in the console on startup.
+  private readonly _versionService = inject(VersionService);
 }

src/app/layout/layout.component.spec.ts

@@ -13,6 +13,7 @@ import {
   MobileService,
   MobileServiceMock,
 } from '../shared/data-access/mobile.service';
+import { PwaService, PwaServiceMock } from '../shared/data-access/pwa.service';
 import {
   ThemeService,
   ThemeServiceMock,
@@ -38,6 +39,7 @@ describe('LayoutComponent', () => {
         { provide: LanguageService, useValue: languageService },
         { provide: MobileService, useClass: MobileServiceMock },
         { provide: AnalyticsService, useClass: AnalyticsServiceMock },
+        { provide: PwaService, useClass: PwaServiceMock },
       ],
     }).compileComponents();
 

src/app/layout/layout.component.ts

@@ -22,6 +22,7 @@ import {
 } from '../shared/data-access/analytics.service';
 import { LanguageService } from '../shared/data-access/language.service';
 import { MobileService } from '../shared/data-access/mobile.service';
+import { PwaService } from '../shared/data-access/pwa.service';
 import { ThemeService } from '../shared/data-access/theme.service';
 import { Theme } from '../shared/types/theme';
 import { sleep } from '../shared/utils/sleep';
@@ -52,6 +53,8 @@ export class LayoutComponent implements AfterViewInit {
   private readonly _languageService = inject(LanguageService);
   private readonly _themeService = inject(ThemeService);
   private readonly _analyticsService = inject(AnalyticsService);
+  // This service gets injected into the layout to initialize the PWA service after the layout has been initialized.
+  private readonly _pwaService = inject(PwaService);
 
   private readonly _header =
     viewChild.required<ElementRef<HTMLElement>>('header');

src/app/shared/data-access/palette.service.ts

@@ -24,6 +24,8 @@ export class PaletteService {
   }
 
   constructor() {
+    this.loadPaletteFromLocalStorage();
+
     effect(() => {
       this._updateVariables();
     });