Load article list asynchronously

cigaradvisor/blocks/article-list/article-list.js

@@ -108,6 +108,14 @@ async function renderByList(configs, wrapper, pinnedArticles, limit) {
   return renderPage(wrapper, articles, limit);
 }
 
+async function renderDummyList(wrapper, limit) {
+  const articles = [];
+  for (let i = 0; i < 10; i += 1) {
+    articles.push({});
+  }
+  return renderPage(wrapper, articles, limit);
+}
+
 export default async function decorate(block) {
   await loadCSS(`${window.hlx.codeBasePath}/blocks/article-teaser/article-teaser.css`);
   const configs = readBlockConfig(block);
@@ -126,21 +134,26 @@ export default async function decorate(block) {
   articleTeaserWrapper.classList.add('article-teaser-wrapper');
   block.replaceChildren(articleTeaserWrapper);
 
+  await renderDummyList(articleTeaserWrapper, limit);
+  // initial load
   if (category) {
-    await renderByCategory(articleTeaserWrapper, category, limit);
+    renderByCategory(articleTeaserWrapper, category, limit).then();
   } else if (author) {
-    await renderByAuthor(articleTeaserWrapper, author, limit);
+    renderByAuthor(articleTeaserWrapper, author, limit).then();
   } else {
-    await renderByList(configs, articleTeaserWrapper, articles, limit);
+    renderByList(configs, articleTeaserWrapper, articles, limit).then();
   }
 
+  // on change
   window.addEventListener('hashchange', async () => {
+    await renderDummyList(articleTeaserWrapper, limit);
+    // initial load
     if (category) {
-      await renderByCategory(articleTeaserWrapper, category, limit);
+      renderByCategory(articleTeaserWrapper, category, limit).then();
     } else if (author) {
-      await renderByAuthor(articleTeaserWrapper, author, limit);
+      renderByAuthor(articleTeaserWrapper, author, limit).then();
     } else {
-      await renderByList(configs, articleTeaserWrapper, articles, limit);
+      renderByList(configs, articleTeaserWrapper, articles, limit).then();
     }
   });
 

cigaradvisor/blocks/article-teaser/article-teaser.css

@@ -1,3 +1,23 @@
+.loading {
+  animation-duration: 1.8s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: loading-shimmer;
+  animation-timing-function: linear;
+  background: #f6f7f8;
+  background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
+  background-size: 1000px 640px;
+}
+
+@keyframes loading-shimmer{
+  0%{
+    background-position: -468px 0
+  }
+
+  100%{
+    background-position: 468px 0
+  }
+}
 
 .article-teaser.block .article-thumbnail:hover::before {
   visibility: hidden;
@@ -93,7 +113,7 @@
   width: 100%;
 }
 
-.article-teaser.block .article.article-thumbnail .article-image>img {
+.article-teaser.block .article.article-thumbnail .article-image > img {
   display: block;
   width: 100%;
   max-height: 321px;
@@ -124,8 +144,6 @@
   justify-content: flex-end;
   text-align: center;
   overflow: hidden;
-  overflow-x: hidden;
-  overflow-y: hidden;
 }
 
 .article-teaser.block .article.article-thumbnail .article-header {
@@ -137,32 +155,32 @@
   display: block;
 }
 
-.article-teaser.block .article.article-thumbnail .article-title {
-  margin: 0 14px 16px;
-  font-size: var(--body-font-size-l);
-  font-weight: 800;
-}
-
-.article-teaser.block .article.article-thumbnail .article-title-link {
-  display: block;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-}
-
-.article-teaser.block .article-thumbnail .article-meta a {
+.article-teaser.block .article-thumbnail .article-meta > a {
   position: relative;
   z-index: 2;
   text-decoration: none;
   color: var(--clr-dark-gray);
 }
 
-.article-teaser.block .article-thumbnail .article-meta>* {
+.article-teaser.block .article-thumbnail .article-meta > * {
   display: inline-block;
   font-family: var(--ff-montserrat);
   font-weight: var(--font-weight-normal);
 }
 
+.article-teaser.block .article.article-thumbnail .article-header > h2 {
+  margin: 0 14px 16px;
+  font-size: var(--body-font-size-l);
+  font-weight: 800;
+}
+
+.article-teaser.block .article.article-thumbnail .article-header > h2 > a {
+  display: block;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+}
+
 .article-teaser.block .article.article-thumbnail .article-pubdate:not(:only-child)::before {
   content: '|';
   display: inline-block;

cigaradvisor/blocks/article-teaser/article-teaser.js

@@ -5,7 +5,82 @@ import {
 
 // eslint-disable-next-line max-len
 export function buildArticleTeaser(parentElement, article) {
-  const ldjson = {
+  const articleEl = document.createElement('article');
+  articleEl.classList.add('article', 'article-thumbnail');
+  parentElement.appendChild(articleEl);
+
+  if (Object.keys(article).length === 0) {
+    articleEl.classList.add('loading');
+    return;
+  }
+
+  if (article.category) {
+    const categoryAnchor = document.createElement('a');
+    categoryAnchor.classList.add('article-category');
+    categoryAnchor.href = article.category.path || '';
+    if (article.category.heading) {
+      categoryAnchor.classList.add(article.category.heading.toLowerCase().replaceAll(/\s+/g, '-'));
+      categoryAnchor.title = article.category.heading;
+      categoryAnchor.setAttribute('data-category', article.category.heading);
+      categoryAnchor.textContent = article.category.heading;
+    }
+    articleEl.appendChild(categoryAnchor);
+  }
+
+  const pictureEl = document.createElement('div');
+  pictureEl.classList.add('article-image');
+  articleEl.appendChild(pictureEl);
+  if (article.image) {
+    const picture = createOptimizedPicture(article.image);
+    picture.querySelector('img').setAttribute('alt', article.heading.replace(/[^\w\s]/gi, ''));
+    decorateSeoPicture(picture, article.path.substring(article.path.lastIndexOf('/') + 1));
+    pictureEl.appendChild(picture);
+  }
+
+  const content = document.createElement('div');
+  content.classList.add('article-content');
+  articleEl.appendChild(content);
+
+  const header = document.createElement('articleheader');
+  header.classList.add('article-header');
+  content.appendChild(header);
+  const title = document.createElement('H2');
+  header.appendChild(title);
+  const titleAnchor = document.createElement('a');
+  titleAnchor.href = article.path || '';
+  if (article.heading) {
+    titleAnchor.title = article.heading;
+    titleAnchor.textContent = article.heading;
+  }
+  title.appendChild(titleAnchor);
+  const meta = document.createElement('div');
+  meta.classList.add('article-meta');
+  header.appendChild(meta);
+  const metaAnchor = document.createElement('a');
+  metaAnchor.href = article.author?.path;
+  if (article.author?.name) {
+    metaAnchor.title = `By ${article.author?.name}`;
+    metaAnchor.textContent = `By ${article.author?.name}`;
+  }
+  meta.appendChild(metaAnchor);
+
+  const preview = document.createElement('div');
+  preview.classList.add('article-preview');
+  content.appendChild(preview);
+  const excerpt = document.createElement('div');
+  excerpt.classList.add('article-excerpt');
+  preview.appendChild(excerpt);
+  const excerptParagraph = document.createElement('p');
+  excerptParagraph.textContent = article.articleBlurb || '';
+  excerpt.appendChild(excerptParagraph);
+  const readMoreAnchor = document.createElement('a');
+  readMoreAnchor.classList.add('article-read-more', 'read-more');
+  readMoreAnchor.href = article.path || '';
+  readMoreAnchor.title = 'Read More';
+  readMoreAnchor.textContent = 'Read More';
+  preview.appendChild(readMoreAnchor);
+
+  const ldJson = {
     '@context': 'http://schema.org',
     '@type': 'BlogPosting',
     name: article.heading,
@@ -28,37 +103,10 @@ export function buildArticleTeaser(parentElement, article) {
     },
     image: `https://www.famous-smoke.com${article.image}`,
   };
-
-  const picture = createOptimizedPicture(article.image);
-  picture.querySelector('img').setAttribute('alt', article.heading.replace(/[^\w\s]/gi, ''));
-  decorateSeoPicture(picture, article.path.substring(article.path.lastIndexOf('/') + 1));
-
-  const category = (article.category && article.category.heading) ? article.category.heading : '';
-  parentElement.innerHTML += `
-    <article class="article article-thumbnail">
-      <a class="article-category ${category.toLowerCase().replaceAll(/\s+/g, '-')}" href="${article.category ? article.category.path : ''}" data-category="${category}" title="${category}">${category}</a>
-      <div class="article-image">
-        ${picture.outerHTML}
-      </div>
-      <div class="article-content">
-        <articleheader class="article-header">
-            <h2 class="article-title">
-              <a class="article-title-link" href="${article.path}" title="${article.heading}">${article.heading}</a>
-            </h2>
-            <div class="article-meta">
-              <a class="article-authorLink" href="${article.author ? article.author.path : ''}" title="By ${(article.author && article.author.name) ? article.author.name : ''}">By ${(article.author && article.author.name) ? article.author.name : ''}</a>
-            </div>
-        </articleheader>
-        <div class="article-preview">
-          <div class="article-excerpt">
-            <p>${article.articleBlurb}</p>
-          </div>
-          <a class="article-read-more read-more" href="${article.path}" title="Read More">Read More</a>
-        </div>
-      </div>
-      <script type="application/ld+json">${JSON.stringify(ldjson)}</script>
-    </article>
-  `;
+  const ldJsonScript = document.createElement('script');
+  ldJsonScript.type = 'application/ld+json';
+  ldJsonScript.textContent = JSON.stringify(ldJson);
+  articleEl.appendChild(ldJsonScript);
 }
 
 export default async function decorate(block) {

cigaradvisor/scripts/delayed.js

@@ -98,8 +98,6 @@ function loadConsentManager() {
   document.head.appendChild(script);
 }
 
-loadConsentManager();
-
 function loadGTM() {
   const tag = document.createElement('script');
   tag.type = 'text/javascript';
@@ -134,6 +132,7 @@ function loadWisePopup() {
 }
 
 window.setTimeout(() => {
+  loadConsentManager();
   if (window.location.hostname !== 'localhost') {
     loadGTM();
     loadFoxPush();