feat: More minor improvements to article placeholder rendering

mwiraszka · Nov 18, 2024 · a1128c8 · a1128c8
1 parent 66ac548
commit a1128c8
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 45 deletions.
diff --git a/src/app/components/article-grid/article-grid.component.html b/src/app/components/article-grid/article-grid.component.html
@@ -7,9 +7,11 @@
     <a
       class="lcc-admin-controls-container article"
       [routerLink]="
-        '/' + NavPathTypes.ARTICLE + '/' + NavPathTypes.VIEW + '/' + article.id
+        article.title
+          ? '/' + NavPathTypes.ARTICLE + '/' + NavPathTypes.VIEW + '/' + article.id
+          : undefined
       ">
-      @if (facade.isAdmin$ | async) {
+      @if ((facade.isAdmin$ | async) && article.title) {
         <lcc-admin-controls
           [editPath]="
             '/' + NavPathTypes.ARTICLE + '/' + NavPathTypes.EDIT + '/' + article.id

diff --git a/src/app/components/article-grid/article-grid.component.ts b/src/app/components/article-grid/article-grid.component.ts
@@ -1,4 +1,5 @@
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import * as uuid from 'uuid';
 
 import { Component, Input, OnInit } from '@angular/core';
 
@@ -16,6 +17,18 @@ import { ArticleGridFacade } from './article-grid.facade';
 })
 export class ArticleGridComponent implements OnInit {
   readonly FIVE_MINUTES_MS = 300_000;
+  readonly PLACEHOLDER_ARTICLE: Article = {
+    id: uuid.v4().slice(-8),
+    title: '',
+    body: '',
+    imageFile: null,
+    imageId: null,
+    imageUrl: null,
+    thumbnailImageUrl: null,
+    isSticky: false,
+    modificationInfo: null,
+  };
+
   readonly NavPathTypes = NavPathTypes;
 
   @Input() maxArticles?: number;
@@ -31,6 +44,7 @@ export class ArticleGridComponent implements OnInit {
 
   ngOnInit(): void {
     this.facade.fetchArticles();
+    this.articles = Array(this.maxArticles ?? 20).fill(this.PLACEHOLDER_ARTICLE);
 
     this.facade.articles$.pipe(untilDestroyed(this)).subscribe(articles => {
       this.articles = this.sortArticles(articles).slice(
@@ -55,7 +69,7 @@ export class ArticleGridComponent implements OnInit {
     return [...stickyArticles, ...remainingArticles];
   }
 
-  wasEdited(article: Article): boolean {
+  wasEdited(article?: Article): boolean {
     if (!article || !article.modificationInfo) {
       return false;
     }

diff --git a/src/app/components/article/article.component.html b/src/app/components/article/article.component.html
@@ -1,49 +1,47 @@
-@if (article) {
-  <div class="article-container">
-    <div class="banner-image-container">
-      @defer {
-        <img
-          [src]="article.imageUrl"
-          default="assets/image-placeholder.png"
-          alt="Article image banner" />
-      } @placeholder (minimum 1s) {
-        <div class="lcc-content-placeholder-wrapper loading-placeholder-image">
-          <div class="lcc-content-placeholder"></div>
-        </div>
-      }
-      <h2 class="lcc-truncate-max-2-lines">
-        {{ article.title | truncateByChars: 120 }}
-      </h2>
+<div class="article-container">
+  <div class="banner-image-container">
+    @defer {
+      <img
+        [src]="article?.imageUrl"
+        default="assets/image-placeholder.png"
+        alt="Article image banner" />
+    } @placeholder (minimum 1s) {
+      <div class="lcc-content-placeholder-wrapper loading-placeholder-image">
+        <div class="lcc-content-placeholder"></div>
+      </div>
+    }
+    <h2 class="lcc-truncate-max-2-lines">
+      {{ article?.title | truncateByChars: 120 }}
+    </h2>
+  </div>
+
+  <div class="article-details-container h4">
+    <div class="author-container">
+      <span class="author-name">
+        {{ article?.modificationInfo?.createdBy }}
+      </span>
+      <span class="date-created">
+        {{ article?.modificationInfo?.dateCreated | formatDate: 'short' }}
+      </span>
     </div>
 
-    <div class="article-details-container h4">
-      <div class="author-container">
-        <span class="author-name">
-          {{ article.modificationInfo?.createdBy }}
+    @if (wasEdited(article)) {
+      <div class="editor-container">
+        <span class="updated">last updated</span>
+        <span class="editor-name">
+          {{ article?.modificationInfo?.lastEditedBy }}
         </span>
-        <span class="date-created">
-          {{ article.modificationInfo?.dateCreated | formatDate: 'short' }}
+        <span class="vertical-spacer">|</span>
+        <span class="date-last-edited">
+          {{ article?.modificationInfo?.dateLastEdited | formatDate: 'short' }}
         </span>
       </div>
+    }
+  </div>
 
-      @if (wasEdited(article)) {
-        <div class="editor-container">
-          <span class="updated">last updated</span>
-          <span class="editor-name">
-            {{ article.modificationInfo?.lastEditedBy }}
-          </span>
-          <span class="vertical-spacer">|</span>
-          <span class="date-last-edited">
-            {{ article.modificationInfo?.dateLastEdited | formatDate: 'short' }}
-          </span>
-        </div>
-      }
-    </div>
-
-    <hr />
+  <hr />
 
-    <div class="markdown-container">
-      <lcc-markdown-renderer [data]="article.body"></lcc-markdown-renderer>
-    </div>
+  <div class="markdown-container">
+    <lcc-markdown-renderer [data]="article?.body"></lcc-markdown-renderer>
   </div>
-}
+</div>
diff --git a/src/app/components/article/article.component.scss b/src/app/components/article/article.component.scss
@@ -8,6 +8,7 @@
 
   img,
   .loading-placeholder-image {
+    height: calc((100vw - 16px) / 1.5);
     // Set based on md-breakpoint value of 700px and 3:2 aspect ratio
     max-height: calc((700px - 16px) / 1.5);
     box-sizing: border-box;

diff --git a/src/app/components/article/article.component.ts b/src/app/components/article/article.component.ts
@@ -12,7 +12,7 @@ export class ArticleComponent {
 
   @Input() article?: Article;
 
-  wasEdited(article: Article): boolean {
+  wasEdited(article?: Article): boolean {
     if (!article || !article.modificationInfo) {
       return false;
     }