feat: display empty div for not visible avatars

GetStream · Sep 15, 2023 · ae9eb61 · ae9eb61
1 parent 5fb9916
commit ae9eb61
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html b/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html
@@ -20,9 +20,20 @@
     [initialsType]="initialsType"
   ></stream-avatar>
 </ng-template>
-<ng-container
-  *ngTemplateOutlet="
-    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;
-    context: context
-  "
-></ng-container>
+<ng-container *ngIf="isVisible; else emptyPlaceholder">
+  <ng-container
+    *ngTemplateOutlet="
+      (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;
+      context: context
+    "
+  ></ng-container>
+</ng-container>
+<ng-template #emptyPlaceholder>
+  <div
+    class="str-chat__avatar"
+    [ngStyle]="{
+      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
+      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'
+    }"
+  ></div>
+</ng-template>
diff --git a/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts b/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts
@@ -1,4 +1,11 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+} from '@angular/core';
 import { Channel, User } from 'stream-chat';
 import { CustomTemplatesService } from '../custom-templates.service';
 import {
@@ -16,7 +23,7 @@ import {
   templateUrl: './avatar-placeholder.component.html',
   styles: [],
 })
-export class AvatarPlaceholderComponent implements OnChanges {
+export class AvatarPlaceholderComponent implements OnChanges, AfterViewInit {
   /**
    * An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
    */
@@ -61,7 +68,19 @@ export class AvatarPlaceholderComponent implements OnChanges {
     type: undefined,
     initialsType: undefined,
   };
-  constructor(public customTemplatesService: CustomTemplatesService) {}
+  isVisible = false;
+  constructor(
+    public customTemplatesService: CustomTemplatesService,
+    private hostElement: ElementRef,
+    private cdRef: ChangeDetectorRef
+  ) {}
+  ngAfterViewInit(): void {
+    this.isVisible =
+      getComputedStyle(this.hostElement.nativeElement).getPropertyValue(
+        'visibility'
+      ) === 'visible';
+    this.cdRef.detectChanges();
+  }
 
   ngOnChanges(): void {
     this.context = {