refactor/style: add loading style to blog components

src/components/Blog/BlogArticleCard/types.ts

@@ -7,4 +7,5 @@ export type BlogArticleCardProps = {
   category: string;
   blogArticleUrl: string;
   size?: "md" | "lg" | "xl" | "full" | "highlighted";
+  loading?: boolean;
 };

src/components/Blog/BlogArticlesGrid/cmp.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import BlogArticleCard from "../BlogArticleCard";
-import { Button } from "@aleph-front/core";
+import { Button, Spinner } from "@aleph-front/core";
 import { AllBlogArticlesProps, Filters } from "./types";
 import { StyledBlogArticlesGrid } from "./styles";
 import { useGetPageCategorization } from "@/hooks/blog/useGetPageCategorization";
 import useFetchBlogArticles from "@/hooks/blog/useFetchBlogArticles";
 import { GetContentOptions } from "@builder.io/sdk";
 import { useSearchParams } from "next/navigation";
 import { DEFAULT_BUILDER_REQUEST_OPTIONS } from "@/constants/blog";
+import { useTheme } from "styled-components";
 
 function buildFilters(searchParams: any, pageCategorization: any): any {
   const queryParams = new URLSearchParams(searchParams);
@@ -45,6 +46,7 @@ export const AllBlogArticles = ({
   articlesLimit,
   customBuilderRequestOptions,
 }: AllBlogArticlesProps) => {
+  const theme: any = useTheme();
   const searchParams = useSearchParams();
   const pageCategorization = useGetPageCategorization();
   const [blogArticles, setBlogArticles] = useState<Set<any>>(new Set());
@@ -134,7 +136,25 @@ export const AllBlogArticles = ({
     continueFetchingBlogArticles();
   };
 
-  if (loading && blogArticles.size === 0) return <p>Loading...</p>;
+  if (loading && blogArticles.size === 0)
+    return (
+      <StyledBlogArticlesGrid>
+        {Array.from({ length: articlesPerPage }).map((_, index) => (
+          <BlogArticleCard
+            key={`loading-article-${index}`}
+            title={""}
+            headline={""}
+            description={""}
+            thumbnailImage={""}
+            featureImage={""}
+            blogArticleUrl={""}
+            category={""}
+            size={articleSize}
+            loading
+          />
+        ))}
+      </StyledBlogArticlesGrid>
+    );
   if (blogArticles.size === 0) return;
 
   return (
@@ -168,7 +188,11 @@ export const AllBlogArticles = ({
             onClick={handleLoadMore}
             disabled={loading}
           >
-            {loading ? "Loading..." : "Load more"}
+            {loading ? (
+              <Spinner tw="pb-6" color={theme.color.dark1} />
+            ) : (
+              "Load more"
+            )}
           </Button>
         </div>
       )}

src/components/Blog/BlogBreadcrumb/cmp.tsx

@@ -3,12 +3,10 @@ import { ReactNode, useEffect, useState } from "react";
 import { StyledBlogBreadcrumb } from "./styles";
 import { BlogBreadcrumbProps } from "./types";
 import { useGetPageCategorization } from "@/hooks/blog/useGetPageCategorization";
-import { fetchAllCategories } from "@/utils/blog/fetchAllCategories";
-import { fetchAllTags } from "@/utils/blog/fetchAllTags";
+import CategorizationDisplayName from "../CategorizationDisplayName";
 
 export const BlogBreadcrumb = (props: BlogBreadcrumbProps) => {
   const DEFAULT_CATEGORIZATION_TYPE = "Classification Type";
-  const DEFAULT_CATEGORIZATION_DISPLAY_NAME = "Classification Display Name";
   const DEFAULT_CATEGORIZATION_ID = "category";
 
   const [links, setLinks] = useState<ReactNode[]>([]);
@@ -24,32 +22,7 @@ export const BlogBreadcrumb = (props: BlogBreadcrumbProps) => {
       </Link>,
     ];
 
-    async function fetchCategorizationDisplayName() {
-      let allCategorizations = undefined;
-
-      switch (pageCategorization?.type) {
-        case "categories":
-          allCategorizations = await fetchAllCategories();
-          break;
-        case "tags":
-          allCategorizations = await fetchAllTags();
-          break;
-      }
-
-      const currentClassification = allCategorizations?.find(
-        (categorization) => {
-          return categorization.id == pageCategorization?.id;
-        }
-      );
-
-      return (
-        currentClassification?.displayName ||
-        DEFAULT_CATEGORIZATION_DISPLAY_NAME
-      );
-    }
-
     async function calculateCategorizationLinks() {
-      const categorizationDisplayName = await fetchCategorizationDisplayName();
       const categorizationType =
         pageCategorization?.type || DEFAULT_CATEGORIZATION_TYPE;
       const categorizationId =
@@ -64,7 +37,7 @@ export const BlogBreadcrumb = (props: BlogBreadcrumbProps) => {
           href={`/blog/${categorizationType}/${categorizationId}`}
           key={categorizationId}
         >
-          {categorizationDisplayName}
+          <CategorizationDisplayName />
         </Link>,
       ];
 

src/components/Blog/BlogCategories/cmp.tsx

@@ -5,51 +5,52 @@ import { getRandomUniqueElements } from "@/utils/getRandomUniqueElements";
 import { Button, Icon } from "@aleph-front/core";
 import React, { useCallback } from "react";
 import { BlogCategoriesProps } from "./types";
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
 
 export const BlogCategories = ({ amount = 10 }: BlogCategoriesProps) => {
   const { data: categories, loading } = useCachedData(
     "blogCategories",
     useCallback(fetchAllCategories, [])
   );
 
-  if (loading) {
+  const titleCmp = (
+    <div tw="flex gap-3 mb-4">
+      <p className="tp-h6 text-base2">Categories</p>
+      <Button
+        as="a"
+        href="/blog/categories"
+        target="_self"
+        size="sm"
+        variant="textOnly"
+        color="main0"
+      >
+        All
+        <Icon name="arrow-right" size="sm" />
+      </Button>
+    </div>
+  );
+
+  if (loading)
     return (
       <>
-        <div tw="flex gap-3 mb-4">
-          <p className="tp-h6 text-base2">Categories</p>
-          <Button
-            as="a"
-            href="/blog/categories"
-            target="_self"
-            size="sm"
-            variant="textOnly"
-            color="main0"
-          >
-            All
-            <Icon name="arrow-right" size="sm" />
-          </Button>
+        {titleCmp}
+        <div tw="flex flex-wrap gap-x-2 gap-y-4">
+          {Array.from({ length: amount }).map((_, index) => (
+            <LoadingBlinkBox
+              key={`loading-category-${index}`}
+              loading={true}
+              loadingHeight="2.25rem"
+              loadingWidth={`${Math.random() * (11 - 6) + 6}rem`}
+              tw="rounded-full"
+            />
+          ))}
         </div>
-        <p>Loading...</p>
       </>
     );
-  }
 
   return (
     <>
-      <div tw="flex gap-3 mb-4">
-        <p className="tp-h6 text-base2">Categories</p>
-        <Button
-          as="a"
-          href="/blog/categories"
-          target="_self"
-          size="sm"
-          variant="textOnly"
-          color="main0"
-        >
-          All
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-      </div>
+      {titleCmp}
       <div tw="flex flex-wrap gap-x-2 gap-y-4">
         {getRandomUniqueElements<BlogCategoryProps>(categories, amount).map(
           (category: BlogCategoryProps) => {

src/components/Blog/BlogCategoriesFilter/cmp.tsx

@@ -1,3 +1,4 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
 import useCachedData from "@/hooks/common/useCachedData";
 import { BlogCategoryProps } from "@/types/blog/BlogCategoryProps";
 import { fetchAllCategories } from "@/utils/blog/fetchAllCategories";
@@ -61,7 +62,35 @@ export const BlogCategories = () => {
     );
   }, [searchParams]);
 
-  if (loading) return <p>Loading...</p>;
+  const clearAllFiltersCmp = (
+    <Button
+      variant="textOnly"
+      as="button"
+      size="sm"
+      onClick={() => handleRemoveFilters()}
+    >
+      Clear all filters
+      <Icon tw="ml-1" size="lg" name="trash-can-xmark" />
+    </Button>
+  );
+
+  if (loading)
+    return (
+      <>
+        <div tw="flex flex-wrap items-start gap-x-2 gap-y-4 mb-4">
+          {Array.from({ length: 12 }).map((_, index) => (
+            <LoadingBlinkBox
+              key={`loading-category-filter-${index}`}
+              loading={true}
+              loadingHeight="3rem"
+              loadingWidth={`${Math.random() * (11 - 6) + 6}rem`}
+              tw="rounded-xl"
+            />
+          ))}
+        </div>
+        {clearAllFiltersCmp}
+      </>
+    );
 
   return (
     <>
@@ -91,15 +120,7 @@ export const BlogCategories = () => {
           );
         })}
       </div>
-      <Button
-        variant="textOnly"
-        as="button"
-        size="sm"
-        onClick={() => handleRemoveFilters()}
-      >
-        Clear all filters
-        <Icon tw="ml-1" size="lg" name="trash-can-xmark" />
-      </Button>
+      {clearAllFiltersCmp}
     </>
   );
 };

src/components/Blog/BlogTags/cmp.tsx

@@ -5,51 +5,52 @@ import { fetchAllTags } from "@/utils/blog/fetchAllTags";
 import { BlogTagProps } from "@/types/blog/BlogTagProps";
 import { BlogTagsProps } from "./types";
 import { getRandomUniqueElements } from "@/utils/getRandomUniqueElements";
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
 
 export const BlogTags = ({ amount = 10 }: BlogTagsProps) => {
   const { data: tags, loading } = useCachedData(
     "blogTags",
     useCallback(fetchAllTags, [])
   );
 
-  if (loading) {
+  const titleCmp = (
+    <div tw="flex gap-3 mb-4">
+      <p className="tp-h6 text-base2">Tags</p>
+      <Button
+        as="a"
+        href="/blog/tags"
+        target="_self"
+        size="sm"
+        variant="textOnly"
+        color="main0"
+      >
+        All
+        <Icon name="arrow-right" size="sm" />
+      </Button>
+    </div>
+  );
+
+  if (loading)
     return (
       <>
-        <div tw="flex gap-3 mb-4">
-          <p className="tp-h6 text-base2">Tags</p>
-          <Button
-            as="a"
-            href="/blog/tags"
-            target="_self"
-            size="sm"
-            variant="textOnly"
-            color="main0"
-          >
-            All
-            <Icon name="arrow-right" size="sm" />
-          </Button>
+        {titleCmp}
+        <div tw="flex flex-wrap gap-x-2 gap-y-4">
+          {Array.from({ length: amount }).map((_, index) => (
+            <LoadingBlinkBox
+              key={`loading-tag-${index}`}
+              loading={true}
+              loadingHeight="2.25rem"
+              loadingWidth={`${Math.random() * (11 - 6) + 6}rem`}
+              tw="rounded-full"
+            />
+          ))}
         </div>
-        <p>Loading...</p>
       </>
     );
-  }
 
   return (
     <>
-      <div tw="flex gap-3 mb-4">
-        <p className="tp-h6 text-base2">Tags</p>
-        <Button
-          as="a"
-          href="/blog/tags"
-          target="_self"
-          size="sm"
-          variant="textOnly"
-          color="main0"
-        >
-          All
-          <Icon name="arrow-right" size="sm" />
-        </Button>
-      </div>
+      {titleCmp}
       <div tw="flex flex-wrap gap-x-2 gap-y-4">
         {getRandomUniqueElements<BlogTagProps>(tags, amount).map(
           (tag: BlogTagProps) => {