fix(esl-carousel): fix initial rendering layout shift to eliminate CL…

…S degradation Closes: #2879 Co-authored-by: alesun <[email protected]>
exadel-inc · Jan 23, 2025 · 7d65335 · 7d65335
1 parent 0210885
commit 7d65335
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/modules/esl-carousel/renderers/esl-carousel.default.renderer.ts b/src/modules/esl-carousel/renderers/esl-carousel.default.renderer.ts
@@ -48,8 +48,15 @@ export class ESLDefaultCarouselRenderer extends ESLCarouselRenderer {
 
   public override redraw(): void {
     this.resize();
+    // Calculate initial offset based on current rendered state (rendering shifts are not allowed)
+    const fallbackOffset = this.getOffset(this.getReserveCount());
+
     this.reorder();
     this.setActive(this.currentIndex);
+
+    // Set initial offset based on pre-calculation
+    this.setTransformOffset(-fallbackOffset);
+    // Update offset according to main algorithm (fix edge cases if the fallback offset is not correct)
     this.setTransformOffset(-this.getOffset(this.currentIndex));
   }