feat: remove unnecessary computation from al-avatar (#252)

Author: DDonochVA

libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html

@@ -17,7 +17,7 @@
 
       <div class="flex items-center justify-between px-6 pt-6">
         <div class="flex items-center gap-2 max-md:self-start">
-          <al-avatar [imageSrc]="article().author.avatarUrl" size="sm" />
+          <al-avatar [imageSrc]="article().author.avatarUrl" size="32" />
           <span class="text-sm/[14px] font-medium">
             {{ article().author.name }}
           </span>

libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card.component.html

@@ -16,7 +16,7 @@
 
       <div class="flex items-center justify-between px-8 pt-8">
         <div class="flex items-center gap-2 max-md:self-start">
-          <al-avatar [imageSrc]="article().author.avatarUrl" size="sm" />
+          <al-avatar [imageSrc]="article().author.avatarUrl" size="32" />
           <span class="text-sm/[14px] font-medium">
             {{ article().author.name }}
           </span>

libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html

@@ -17,7 +17,7 @@
           <al-avatar
             [imageSrc]="article().author.avatarUrl"
             [priority]="imagePriority()"
-            size="sm"
+            size="32"
           />
           <span class="text-sm/[14px] font-medium">
             {{ article().author.name }}

libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html

@@ -21,7 +21,7 @@
           <al-avatar
             [imageSrc]="article().author.avatarUrl"
             [priority]="imagePriority()"
-            size="sm"
+            size="32"
           />
           <span class="text-sm/[14px] font-medium">
             {{ article().author.name }}

libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html

@@ -34,7 +34,7 @@
 
   <ng-template #avatar>
     <div class="flex flex-col items-center gap-4">
-      <al-avatar [imageSrc]="author().avatarUrl" size="md" />
+      <al-avatar [imageSrc]="author().avatarUrl" size="96" />
       <span
         class="line-clamp-2 font-bold leading-none"
         [id]="'author-title-' + author().slug"

libs/blog/shared/ui-avatar/src/lib/avatar.component.html

@@ -1,19 +1,15 @@
 <div
   class="flex items-center justify-center overflow-hidden rounded-full border border-white bg-gray-200"
-  [ngStyle]="{
-    height: sideLength() + 'px',
-    width: sideLength() + 'px',
-  }"
 >
   @if (imageSrc()) {
     <img
       alt=""
       [ngSrc]="imageSrc()"
-      [width]="sideLength()"
-      [height]="sideLength()"
+      [width]="size()"
+      [height]="size()"
       [priority]="priority()"
     />
   } @else {
-    <ng-icon name="heroUsers"></ng-icon>
+    <div></div>
   }
 </div>

libs/blog/shared/ui-avatar/src/lib/avatar.component.ts

@@ -1,14 +1,8 @@
 import { NgOptimizedImage, NgStyle } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
-import { NgIconComponent, provideIcons } from '@ng-icons/core';
-import { heroUsers } from '@ng-icons/heroicons/outline';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIconComponent } from '@ng-icons/core';
 
-type AvatarSize = 'sm' | 'md';
+type AvatarSize = '32' | '96';
 
 @Component({
   standalone: true,
@@ -17,21 +11,9 @@ type AvatarSize = 'sm' | 'md';
   styleUrls: ['./avatar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgOptimizedImage, NgIconComponent, NgStyle],
-  providers: [provideIcons({ heroUsers })],
 })
 export class AvatarComponent {
   readonly imageSrc = input.required<string>();
-  readonly size = input<AvatarSize>('sm');
+  readonly size = input<AvatarSize>('32');
   readonly priority = input<number | null>(null);
-
-  protected sideLength = computed(() => {
-    switch (this.size()) {
-      case 'sm':
-        return '32';
-      case 'md':
-        return '96';
-      default:
-        return '32';
-    }
-  });
 }