added loading indicator to blog page

src/components/blog/BlogCards/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import styles from './styles.module.css';
 import BlogCard from '../BlogCard';
+import BounceLoader from 'react-spinners/BounceLoader';
 
 import {getBlogPosts, getTopic} from '../../../services/DiscourseService';
 export default function BlogCards({
   filterCallback
   }) {
   const [cardData, setCardData] = React.useState();
+  const [loadingCards, setLoadingCards] = React.useState(true);
 
   const getPosts = async () => {
     const data = await getBlogPosts(filterCallback.join(','));
@@ -19,11 +21,13 @@ export default function BlogCards({
     } else {
       setCardData(undefined);
     }
-    
+    setLoadingCards(false);
   };
 
   React.useEffect(() => {
     getPosts();
+    setCardData(undefined);
+    setLoadingCards(true);
   }, [filterCallback]);
 
   if (cardData) {
@@ -48,8 +52,24 @@ export default function BlogCards({
         </div>
       </div>
     );
+  } else if (loadingCards) {
+    return (
+      <BounceLoader
+        className={styles.spinnerCenter}
+        color={'#0033a1'}
+        loading={true}
+        size={150}
+        aria-label="Loading Spinner"
+        data-testid="loader"
+      />
+    );
   } else {
-    return <div className={styles.noFound}> No Blog Post Found with the Given Search Criteria</div>;
+    return (
+      <div className={styles.noFound}>
+        {' '}
+        No Blogposts Found with the Given Search Criteria
+      </div>
+    );
   }
 }
 

src/components/blog/BlogCards/styles.module.css

@@ -25,3 +25,11 @@
   padding: 8px;
   margin: 50px;
 }
+
+
+
+.spinnerCenter {
+  margin: 100px auto;
+  max-width: 1300px;
+  margin-bottom: 50px;
+}

src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './styles.module.css';
 
 
-export default function BlogSidebarButton({
+export default function MarketplaceSidebarButton({
     filterCallback,
     text
   }) {

src/components/marketplace/MarketplaceSidebar/index.js

@@ -4,9 +4,9 @@ import styles from './styles.module.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 import { getTags } from '../../../services/DiscourseService';
-import BlogSidebarButton from './BlogSidebarButton';
+import MarketplaceSidebarButton from './MarketplaceSidebarButton';
 
-export default function BlogSidebar({
+export default function MarketplaceSidebar({
   filterCallback
   }) {
   const [tagProductData, setTagProductData] = React.useState();
@@ -47,16 +47,16 @@ export default function BlogSidebar({
   if (tagProductData && tagTechnologyData) {
     return (
       <div className={styles.sidebar}>
-        <div className={styles.tagHeader}>Posts by Product</div>
+        <div className={styles.tagHeader}>Items by Product</div>
         <div className={styles.tagContainer}>
             {tagProductData.map(function(a, index){
-              return <BlogSidebarButton key={a} text={a} filterCallback={filterCallback}></BlogSidebarButton>
+              return <MarketplaceSidebarButton key={a} text={a} filterCallback={filterCallback}></MarketplaceSidebarButton>
             })}
         </div>
-        <div className={styles.tagHeader}>Posts by Identity Governance</div>
+        <div className={styles.tagHeader}>Items by Identity Governance</div>
         <div className={styles.tagContainer}>
             {tagTechnologyData.map(function(a, index){
-              return <div key={'div' + a} className={index > 10 && filterTags ? styles.hidden : ''} > <BlogSidebarButton key={a} text={a} filterCallback={filterCallback}></BlogSidebarButton></div>
+              return <div key={'div' + a} className={index > 10 && filterTags ? styles.hidden : ''} > <MarketplaceSidebarButton key={a} text={a} filterCallback={filterCallback}></MarketplaceSidebarButton></div>
             })}
         </div>
         <div className={styles.seeAll} onClick={(e) => toggleSeeAll()}>