fix the SSR issue for responsive-image

irohalab · Oct 4, 2024 · d29663b · d29663b
1 parent 0106611
commit d29663b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/projects/irohalab/deneb-ui/src/responsive-image/responsive-image-wrapper.ts b/projects/irohalab/deneb-ui/src/responsive-image/responsive-image-wrapper.ts
@@ -54,7 +54,8 @@ export const DEFAULT_HIDDEN_OPACITY = 0.01;
         '[style.width]': 'hostWidth',
         '[style.height]': 'hostHeight',
         '[style.paddingBottom]': 'hostPaddingBottom',
-        '[style.background]': 'background'
+        '[style.background]': 'background',
+        ngSkipHydration: 'true'
     }
 })
 export class UIResponsiveImageWrapper {

diff --git a/projects/irohalab/deneb-ui/src/responsive-image/responsive-image.directive.ts b/projects/irohalab/deneb-ui/src/responsive-image/responsive-image.directive.ts
@@ -23,7 +23,8 @@ export interface ResponsiveDimension {
  * - height is calculated or measured height
  */
 @Directive({
-    selector: 'img[originalSrc]'
+    selector: 'img[originalSrc]',
+    host: { ngSkipHydration: 'true' }
 })
 export class UIResponsiveImage implements OnInit, OnChanges, OnDestroy {
     private _src: string;

diff --git a/projects/irohalab/deneb-ui/src/responsive-image/responsive.service.ts b/projects/irohalab/deneb-ui/src/responsive-image/responsive.service.ts
@@ -1,4 +1,5 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
 
 export interface ObservableStub {
     target: Element;
@@ -8,12 +9,16 @@ export interface ObservableStub {
 
 @Injectable()
 export class UIResponsiveService {
-    private _observer: IntersectionObserver;
+    private _observer: IntersectionObserver | ServerIntersectionObserverFallback;
 
     private _observableStubList: ObservableStub[] = [];
 
-    constructor() {
-        this._observer = new IntersectionObserver(this.intersectionCallback.bind(this));
+    constructor(@Inject(PLATFORM_ID) platformId: object) {
+        if (isPlatformServer(platformId)) {
+            this._observer = new ServerIntersectionObserverFallback(this.intersectionCallback.bind(this));
+        } else {
+            this._observer = new IntersectionObserver(this.intersectionCallback.bind(this));
+        }
     }
 
     intersectionCallback(entries: IntersectionObserverEntry[]) {
@@ -53,3 +58,10 @@ export class UIResponsiveService {
         return this._observableStubList.find(stub => stub.target === target);
     }
 }
+
+class ServerIntersectionObserverFallback  {
+    constructor(private callback: IntersectionObserverCallback) {}
+    observe(target: Element) {
+    }
+    unobserve(target: Element) {}
+}