fix(algorithms): render sliders only after first browser render

ngx-slider throws during prerender (no layout APIs on the server).
Its ngOnDestroy then calls disconnect() on null, so about 1 in 10
prerender builds failed. Gate fractal and pendulum sliders on a
signal set by afterNextRender.

src/app/pages/algorithms/fractal/fractal.component.html

@@ -31,7 +31,11 @@
       </div>
       <div style="display: flex; align-items: center; gap: 10px;">
         <mat-icon>zoom_out</mat-icon>
+        @if (sliderReady()) {
           <ngx-slider [(value)]="sliderValue" [options]="options" (valueChange)="onSliderChange($event)" ></ngx-slider>
+        } @else {
+          <div class="grow h-[60px]"></div>
+        }
         <mat-icon>zoom_in</mat-icon>
       </div>
     </div>

src/app/pages/algorithms/fractal/fractal.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, signal} from '@angular/core';
+import {afterNextRender, Component, OnInit, signal} from '@angular/core';
 import {Information} from '../information/information';
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
 import {TranslatePipe} from '@ngx-translate/core';
@@ -39,6 +39,13 @@ import {clampZoom, initialView, iterationsForZoom, zoomAroundPoint} from './frac
   styleUrl: './fractal.component.scss',
 })
 export class FractalComponent implements OnInit {
+  // ngx-slider throws on the server (no layout APIs), so render it in the browser only
+  readonly sliderReady = signal(false);
+
+  constructor() {
+    afterNextRender(() => this.sliderReady.set(true));
+  }
+
   algoInformation: AlgorithmInformation = {
     title: 'FRACTAL.EXPLANATION.TITLE',
     entries: [

src/app/pages/algorithms/pendulum/pendulum.component.html

@@ -5,6 +5,7 @@
   <mat-card-content>
     <app-information [algorithmInformation]="algoInformation"/>
     <div class="flex flex-col mb-4">
+      @if (sliderReady()) {
         <div class="grid grid-cols-2 tablet:grid-cols-1 tablet:gap-4 mb-6">
             <div class="flex items-center gap-4 mr-4">
               <p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
@@ -38,6 +39,9 @@
               <ngx-slider class="grow" [(value)]="damping" [options]="dampingOptions" ></ngx-slider>
             </div>
         </div>
+      } @else {
+        <div class="mb-6 h-[200px]"></div>
+      }
 
       <div class="flex flex-wrap gap-3 mb-4">
         <button mat-raised-button color="primary" (click)="pushPendulum(true)">

src/app/pages/algorithms/pendulum/pendulum.component.ts

@@ -1,4 +1,4 @@
-import {Component, signal} from '@angular/core';
+import {afterNextRender, Component, signal} from '@angular/core';
 import {BabylonCanvas, RenderConfig, SceneEventData} from '../../../shared/components/render-canvas/babylon-canvas.component';
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
 
@@ -33,6 +33,13 @@ import {PendulumCpuStrategy} from './strategies/pendulum-cpu.strategy';
 })
 class PendulumComponent {
 
+  // ngx-slider throws on the server (no layout APIs), so render it in the browser only
+  readonly sliderReady = signal(false);
+
+  constructor() {
+    afterNextRender(() => this.sliderReady.set(true));
+  }
+
   algoInformation: AlgorithmInformation = {
     title: 'PENDULUM.EXPLANATION.TITLE',
     entries: [