gatsby-matrix-theme 40.0.19 → 40.0.21

package/src/gatsby-core-theme/components/molecules/header/index.js

@@ -1,146 +1,238 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext } from 'react';
+/* eslint-disable react/forbid-prop-types */
+import React, { useContext, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
 import Breadcrumbs from 'gatsby-core-theme/src/components/atoms/breadcrumbs';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import { getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
+import DefaulTemplateTwo from '../../../../components/molecules/header/variants/default/template-two';
+import DefaulTemplateOne from '../../../../components/molecules/header/variants/default/template-one';
+import ReviewCredits from '../../../../components/atoms/review-credits';
+import Author from '~atoms/author';
 import styles from './header.module.scss';
 
-export const relationContent = (section, numOfStarsRating) => {
-  let ModuleComponent = null;
-  switch (section?.page?.relation_type) {
-    case 'payment_method': {
-      const data = {
-        page: section?.page,
-        relation: section?.page?.relation || {},
-        type: section?.page?.relation_type,
-        template: section?.page?.page_styles?.short_name,
-        pageTemplate: section?.page?.template,
-        sections: section?.page?.sections,
-        name: section?.page?.title || section?.page?.relation?.name,
-        ribbons: section?.page?.relation?.ribbons || [],
-        image:
-          section?.page?.relation?.standardised_logo_filename_object ||
-          section?.page?.relation?.logo_filename_object,
-        numOfStars: 5,
-        description:
-          section.page.description ||
-          getSectionExtraField(null, section.page.sections.header, 'header_text'),
-      };
-      switch (section?.page?.page_styles?.short_name) {
-        case 'template_two': {
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/payment/template-two/index')
-          );
-          return <ModuleComponent {...data} />;
-        }
-        case 'template_four': {
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/payment/template-four/index')
-          );
-          return <ModuleComponent {...data} />;
-        }
-        case 'template_five': {
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/payment/template-five/index')
-          );
-          return <ModuleComponent {...data} />;
-        }
-        default: {
-          ModuleComponent = loadable(() =>
-            import(
-              '../../../../components/molecules/header/variants/payment/template-one-three/index'
-            )
-          );
-          return <ModuleComponent {...data} />;
+export default function Header({ section, numOfStarsRating = 5, showAuthor }) {
+  const { bannerIsActive } = useContext(Context) || {};
+  const customStyles = section.page.path === '/' ? 'homepage' : section.page.path.replace('/', '-');
+
+  const relationContent = (pageSection, starratings) => {
+    let ModuleComponent = null;
+    switch (pageSection?.page?.relation_type) {
+      case 'payment_method': {
+        const data = {
+          page: pageSection?.page,
+          relation: pageSection?.page?.relation || {},
+          type: pageSection?.page?.relation_type,
+          template: pageSection?.page?.page_styles?.short_name,
+          pageTemplate: pageSection?.page?.template,
+          pageSections: pageSection?.page?.pageSections,
+          name: pageSection?.page?.title || pageSection?.page?.relation?.name,
+          ribbons: pageSection?.page?.relation?.ribbons || [],
+          image:
+            pageSection?.page?.relation?.standardised_logo_filename_object ||
+            pageSection?.page?.relation?.logo_filename_object,
+          numOfStars: 5,
+          description:
+            pageSection.page.description ||
+            getSectionExtraField(null, pageSection.page.sections.header, 'header_text'),
+        };
+        switch (pageSection?.page?.page_styles?.short_name) {
+          case 'template_two': {
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/payment/template-two/index')
+            );
+            return <ModuleComponent {...data} />;
+          }
+          case 'template_four': {
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/payment/template-four/index')
+            );
+            return <ModuleComponent {...data} />;
+          }
+          case 'template_five': {
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/payment/template-five/index')
+            );
+            return <ModuleComponent {...data} />;
+          }
+          default: {
+            ModuleComponent = lazy(() =>
+              import(
+                '../../../../components/molecules/header/variants/payment/template-one-three/index'
+              )
+            );
+            return <ModuleComponent {...data} />;
+          }
         }
       }
-    }
-    case 'software_provider': {
-      ModuleComponent = loadable(() =>
-        import('../../../../components/molecules/header/variants/software')
-      );
-      return <ModuleComponent page={section.page} />;
-    }
-    case 'article': {
-      ModuleComponent = loadable(() =>
-        import('../../../../components/molecules/header/variants/article')
-      );
-      return <ModuleComponent page={section.page} />;
-    }
-    case 'operator': {
-      const data = {
-        page: section?.page,
-        author: section?.page.author,
-        type: section?.page?.relation_type,
-        template: section?.page?.page_styles?.short_name,
-        pageTemplate: section?.page?.template,
-        relation: section?.page?.relation || {},
-        name: section?.page?.title || section?.page?.relation?.name,
-        ribbons: section?.page?.relation?.ribbons || [],
-        image:
-          section?.page?.relation?.standardised_logo_url_object ||
-          section?.page?.relation?.logo_url_object,
-        featureImg: section?.page?.featured_image_object,
-        extraFields: section?.page?.extra_fields || {},
-        numOfStars: numOfStarsRating,
-      };
-      switch (section?.page?.page_styles?.short_name) {
-        case 'template_three': {
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/operator/template-three')
-          );
-          return <ModuleComponent {...data} />;
-        }
-        case 'template_four': {
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/operator/template-four/index')
-          );
-          return <ModuleComponent {...data} />;
-        }
-        case 'template_five': {
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/operator/template-five/index')
-          );
-          return <ModuleComponent {...data} />;
+      case 'software_provider': {
+        ModuleComponent = lazy(() =>
+          import('../../../../components/molecules/header/variants/software')
+        );
+        return <ModuleComponent page={pageSection.page} />;
+      }
+      case 'article': {
+        ModuleComponent = lazy(() =>
+          import('../../../../components/molecules/header/variants/article')
+        );
+        return <ModuleComponent page={pageSection.page} />;
+      }
+      case 'operator': {
+        const data = {
+          page: pageSection?.page,
+          author: pageSection?.page.author,
+          type: pageSection?.page?.relation_type,
+          template: pageSection?.page?.page_styles?.short_name,
+          pageTemplate: pageSection?.page?.template,
+          relation: pageSection?.page?.relation || {},
+          name: pageSection?.page?.title || pageSection?.page?.relation?.name,
+          ribbons: pageSection?.page?.relation?.ribbons || [],
+          image:
+            pageSection?.page?.relation?.standardised_logo_url_object ||
+            pageSection?.page?.relation?.logo_url_object,
+          featureImg: pageSection?.page?.featured_image_object,
+          extraFields: pageSection?.page?.extra_fields || {},
+          numOfStars: starratings,
+        };
+        switch (pageSection?.page?.page_styles?.short_name) {
+          case 'template_three': {
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/operator/template-three')
+            );
+            return <ModuleComponent {...data} />;
+          }
+          case 'template_four': {
+            ModuleComponent = lazy(() =>
+              import(
+                '../../../../components/molecules/header/variants/operator/template-four/index'
+              )
+            );
+            return <ModuleComponent {...data} />;
+          }
+          case 'template_five': {
+            ModuleComponent = lazy(() =>
+              import(
+                '../../../../components/molecules/header/variants/operator/template-five/index'
+              )
+            );
+            return <ModuleComponent {...data} />;
+          }
+          default: {
+            ModuleComponent = lazy(() =>
+              import(
+                '../../../../components/molecules/header/variants/operator/template-one-two/index'
+              )
+            );
+            return <ModuleComponent {...data} />;
+          }
         }
-        default: {
-          ModuleComponent = loadable(() =>
-            import(
-              '../../../../components/molecules/header/variants/operator/template-one-two/index'
-            )
-          );
-          return <ModuleComponent {...data} />;
+      }
+      case 'game': {
+        switch (pageSection?.page?.page_styles?.short_name) {
+          case 'template_two': {
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/slot/template-two')
+            );
+            return (
+              <ModuleComponent page={pageSection.page} image="../../../../images/verify.svg" />
+            );
+          }
+          default: {
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/slot/template-one')
+            );
+            return (
+              <ModuleComponent page={pageSection.page} image="../../../../images/verify.svg" />
+            );
+          }
         }
       }
-    }
-    case 'game': {
-      switch (section?.page?.page_styles?.short_name) {
-        case 'template_two': {
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/slot/template-two')
-          );
-          return <ModuleComponent page={section.page} image="../../../../images/verify.svg" />;
+      case 'sport': {
+        let props = {
+          page: pageSection.page,
+          extraFields: pageSection.page.extra_fields,
+        };
+
+        ModuleComponent = lazy(() =>
+          import('../../../../components/molecules/header/variants/sport/template-one/index')
+        );
+        props = {
+          ...props,
+          title: pageSection.page.title,
+          description:
+            pageSection.page.description ||
+            getSectionExtraField(null, pageSection.page.pageSections.header, 'header_text'),
+        };
+
+        return <ModuleComponent {...props} page={pageSection.page} />;
+      }
+      case 'author': {
+        if (!pageSection.page.relation) {
+          return <></>;
         }
-        default: {
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/slot/template-one')
-          );
-          return <ModuleComponent page={section.page} image="../../../../images/verify.svg" />;
+
+        switch (pageSection?.page?.page_styles?.short_name) {
+          case 'template_two':
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/author/template-two')
+            );
+            return (
+              <ModuleComponent
+                author={pageSection.page.relation}
+                authorTitle={pageSection?.page?.title}
+              />
+            );
+          case 'template_three':
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/author/template-three')
+            );
+            return (
+              <ModuleComponent
+                author={pageSection.page.relation}
+                authorTitle={pageSection?.page?.title}
+              />
+            );
+          case 'template_four':
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/author/template-four')
+            );
+
+            return (
+              <ModuleComponent
+                author={pageSection.page.relation}
+                authorTitle={pageSection?.page?.title}
+              />
+            );
+          case 'template_one':
+          default:
+            ModuleComponent = lazy(() =>
+              import('../../../../components/molecules/header/variants/author/template-one')
+            );
+            return (
+              <ModuleComponent
+                author={pageSection.page.relation}
+                authorTitle={pageSection?.page?.title}
+              />
+            );
         }
       }
+      default:
+        return ModuleComponent;
     }
+  };
 
-    case 'sport': {
-      let props = {
-        page: section.page,
-        extraFields: section.page.extra_fields,
-      };
+  const getDefaultHeader = () => {
+    let props = {
+      page: section.page,
+      extraFields: section.page.extra_fields,
+      imageObj: section.page.featured_image_object,
+    };
+    let ModuleComponent = null;
 
-      ModuleComponent = loadable(() =>
-        import('../../../../components/molecules/header/variants/sport/template-one/index')
-      );
+    if (section?.page?.page_styles?.short_name === 'template_two') {
+      ModuleComponent = DefaulTemplateTwo;
+    } else {
+      ModuleComponent = DefaulTemplateOne;
       props = {
         ...props,
         title: section.page.title,
@@ -148,112 +240,39 @@ export const relationContent = (section, numOfStarsRating) => {
           section.page.description ||
           getSectionExtraField(null, section.page.sections.header, 'header_text'),
       };
-
-      return <ModuleComponent {...props} page={section.page} />;
-    }
-
-    case 'author': {
-      if (!section.page.relation) {
-        return <></>;
-      }
-
-      switch (section?.page?.page_styles?.short_name) {
-        case 'template_two':
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/author/template-two')
-          );
-          return (
-            <ModuleComponent author={section.page.relation} authorTitle={section?.page?.title} />
-          );
-        case 'template_three':
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/author/template-three')
-          );
-          return (
-            <ModuleComponent author={section.page.relation} authorTitle={section?.page?.title} />
-          );
-        case 'template_four':
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/author/template-four')
-          );
-
-          return (
-            <ModuleComponent author={section.page.relation} authorTitle={section?.page?.title} />
-          );
-        case 'template_one':
-        default:
-          ModuleComponent = loadable(() =>
-            import('../../../../components/molecules/header/variants/author/template-one')
-          );
-          return (
-            <ModuleComponent author={section.page.relation} authorTitle={section?.page?.title} />
-          );
-      }
     }
-    case 'page': {
-      let props = {
-        page: section.page,
-        extraFields: section.page.extra_fields,
-        imageObj: section.page.featured_image_object,
-      };
+    return <ModuleComponent {...props} />;
+  };
 
-      if (section?.page?.page_styles?.short_name === 'template_two') {
-        ModuleComponent = loadable(() =>
-          import('../../../../components/molecules/header/variants/default/template-two')
-        );
-      } else {
-        ModuleComponent = loadable(() =>
-          import('../../../../components/molecules/header/variants/default/template-one')
-        );
-        props = {
-          ...props,
-          title: section.page.title,
-          description:
-            section.page.description ||
-            getSectionExtraField(null, section.page.sections.header, 'header_text'),
-        };
-      }
-      return <ModuleComponent {...props} />;
-    }
-    default:
-      return ModuleComponent;
-  }
-};
-
-export default function Header({ section, numOfStarsRating = 5, showAuthor = false }) {
-  const { bannerIsActive } = useContext(Context) || {};
-  const customStyles = section.page.path === '/' ? 'homepage' : section.page.path.replace('/', '-');
   const { page } = section || {};
   const { sections } = page || {};
-
   const isContactUsPage = !!sections?.main?.modules?.filter(
     (module) => module.name === 'contact_form'
   ).length;
 
-  const ReviewCredits =
+  const showReviewCredits =
     section.page.path !== '/' &&
     !isContactUsPage &&
     section.page.path !== 'news' &&
     section.page.path !== 'sitemap' &&
     section.page.template !== 'ppc' &&
     section.page.author_id &&
-    showAuthor
-      ? loadable(() => import('../../../../components/atoms/review-credits'))
-      : null;
-  const Author =
+    showAuthor;
+
+  const showAuthorComponent =
     section.page.path !== '/' &&
     !isContactUsPage &&
     section.page.path !== 'news' &&
     section.page.path !== 'sitemap' &&
     section.page.template !== 'ppc' &&
     section.page.author_id &&
-    showAuthor
-      ? loadable(() => import('~atoms/author'))
-      : null;
+    showAuthor;
+
   const useReviewCredits =
     process.env.GATSBY_SITE_NAME === 'irishluck.ie' ||
     process.env.GATSBY_SITE_NAME === 'demosite' ||
     process.env.GATSBY_SITE_NAME === 'playcasino.co.za';
+
   const hasAuthorBox = !!(page.author_id && !isContactUsPage);
 
   const date =
@@ -261,6 +280,8 @@ export default function Header({ section, numOfStarsRating = 5, showAuthor = fal
       ? page.manual_updated_date || page.manual_published_date
       : '';
 
+  const skeletonClassName = `skeleton${section?.page?.relation_type}`;
+
   return (
     <header
       className={`${styles?.header || ''} 
@@ -276,9 +297,16 @@ export default function Header({ section, numOfStarsRating = 5, showAuthor = fal
         `}
     >
       {section.page.path && <Breadcrumbs markets={section.allMarkets} page={section.page} />}
-      {relationContent(section, numOfStarsRating)}
+      {section?.page?.relation_type === 'page' ? (
+        getDefaultHeader()
+      ) : (
+        <Suspense fallback={<div className={`${styles[skeletonClassName]}`} />}>
+          {relationContent(section, numOfStarsRating)}
+        </Suspense>
+      )}
+
       {useReviewCredits
-        ? ReviewCredits && (
+        ? showReviewCredits && (
             <ReviewCredits
               date={date}
               author={page?.author_id && page?.author}
@@ -288,7 +316,7 @@ export default function Header({ section, numOfStarsRating = 5, showAuthor = fal
               type={page?.template}
             />
           )
-        : Author && (
+        : showAuthorComponent && (
             <Author
               name={page.author?.name}
               date={date}
@@ -314,6 +342,9 @@ Header.propTypes = {
       path: PropTypes.string,
       updated_at: PropTypes.string,
       created_at: PropTypes.string,
+      description: PropTypes.string,
+      featured_image_object: PropTypes.object,
+      extra_fields: PropTypes.object,
       page_styles: PropTypes.shape({
         short_name: PropTypes.string,
       }),