From ff42022a59bb67128205aa64bb703869e531f4c6 Mon Sep 17 00:00:00 2001
From: Heo Sangmin <heo@mapiacompany.com>
Date: Sat, 7 Jan 2023 13:43:50 +0900
Subject: [PATCH] feat(slick): hide all slides except first one when server
 side rendering

---
 src/slick.component.ts | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/slick.component.ts b/src/slick.component.ts
index e9078f5..c9bbf65 100755
--- a/src/slick.component.ts
+++ b/src/slick.component.ts
@@ -1,4 +1,4 @@
-import { isPlatformBrowser, isPlatformServer } from '@angular/common';
+import { isPlatformServer } from '@angular/common';
 import {
   AfterViewChecked,
   AfterViewInit,
@@ -16,6 +16,7 @@ import {
   OnInit,
   Output,
   PLATFORM_ID,
+  Renderer2,
   SimpleChanges
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -241,20 +242,23 @@ export class SlickCarouselComponent implements OnDestroy, OnChanges, AfterViewIn
   selector: '[ngxSlickItem]',
 })
 export class SlickItemDirective implements OnInit, OnDestroy {
-  constructor(public el: ElementRef,
-              @Inject(PLATFORM_ID) private platformId: string,
-              @Host() private carousel: SlickCarouselComponent) {
+  constructor(
+    public el: ElementRef,
+    public renderer: Renderer2,
+    @Inject(PLATFORM_ID) private platformId: string,
+    @Host() private carousel: SlickCarouselComponent,
+  ) {
   }
 
   ngOnInit() {
-    if (isPlatformBrowser(this.platformId)) {
-      this.carousel.addSlide(this);
+    this.carousel.addSlide(this);
+    if (isPlatformServer(this.platformId) && this.carousel.slides.length > 0) {
+      // Do not show other slides in server side rendering (broken ui can be affacted to Core Web Vitals)
+      this.renderer.setStyle(this.el, 'display', 'none');
     }
   }
 
   ngOnDestroy() {
-    if (isPlatformBrowser(this.platformId)) {
-      this.carousel.removeSlide(this);
-    }
+    this.carousel.removeSlide(this);
   }
 }