gatsby-matrix-theme 40.0.19 → 40.0.21

package/src/components/organisms/cards/index.js

@@ -1,32 +1,31 @@
 import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import loadable from '@loadable/component';
 import ModuleIntroduction from './module-introduction';
 import SeeMore from '../../atoms/see-more';
+import OperatorsTable from '../../atoms/cards/operators-table';
+import ComparisonTable from '../../atoms/cards/comparison-table';
+import SrcollLayout from './template-two';
+import GridLayout from './template-one';
 
 export default function index({ module, page, seeMoreButtonDown = false }) {
   const Component = () => {
     switch (module?.style) {
       case 'stack_table': {
         if (module.cards_page_type === 'operator') {
-          const OperatorsTable = loadable(() => import('../../atoms/cards/operators-table'));
           return <OperatorsTable module={module} page={page} />;
         }
         return null;
       }
       case 'comparison_table': {
         if (module.cards_page_type === 'operator') {
-          const ComparisonTable = loadable(() => import('../../atoms/cards/comparison-table'));
           return <ComparisonTable module={module} page={page} />;
         }
         return null;
       }
       case 'template_two': {
-        const SrcollLayout = loadable(() => import('./template-two'));
         return <SrcollLayout module={module} page={page} />;
       }
       default: {
-        const GridLayout = loadable(() => import('./template-one'));
         return <GridLayout module={module} page={page} />;
       }
     }

package/src/components/organisms/cards/module-introduction/index.js

@@ -1,21 +1,17 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
 import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
+import { removeSymbols } from '../../../../helpers/strings';
+import ModuleIntro from '~molecules/content';
 import styles from './styles.module.scss';
 import ModuleTitle from '../../../../gatsby-core-theme/components/atoms/module-title';
-
-import { removeSymbols } from '../../../../helpers/strings';
 import SeeMore from '../../../atoms/see-more';
 
 const ModuleIntroduction = ({ module, showSeeMore = false }) => {
   const anchorLabel = module?.anchor_label && removeSymbols(anchorLink(module?.anchor_label));
 
-  const ModuleIntro =
-    module?.module_introduction && module?.module_introduction !== '<p></p>'
-      ? loadable(() => import('~molecules/content'))
-      : null;
+  const showModuleIntro = module?.module_introduction && module?.module_introduction !== '<p></p>';
 
   return (
     <div className={ModuleIntro ? '' : styles.noIntroModuleCards}>
@@ -24,7 +20,7 @@ const ModuleIntroduction = ({ module, showSeeMore = false }) => {
         anchorLabel={module.name === 'archive' && anchorLabel}
         showMoreLink={!ModuleIntro}
       />
-      {ModuleIntro && (
+      {showModuleIntro && (
         <ModuleIntro
           isModuleIntroduction={module?.module_introduction}
           module={{ value: module?.module_introduction }}

package/src/components/organisms/cards/template-one/cards.module.scss

@@ -0,0 +1,24 @@
+.cardsContainer {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+
+  @include min(tablet) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include min(desktop) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  column-gap: 0.8rem;
+  row-gap: 1rem;
+
+  @include min(desktop) {
+    column-gap: 1.6rem;
+  }
+  > div {
+    margin: 0.4rem 0;
+    @include min(desktop) {
+      margin: 0.8rem 0;
+    }
+  }
+}

package/src/components/organisms/cards/template-one/index.js

@@ -1,20 +1,67 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/destructuring-assignment */
-import React from 'react';
-import Card from 'gatsby-core-theme/src/components/organisms/cards/index';
+// import React from 'react';
+// import Card from 'gatsby-core-theme/src/components/organisms/cards/index';
+// import { getCard } from '../../../../helpers/cards';
+
+// export default ({ module, page }) => {
+//   const customCardComponent = getCard(module?.model_type || module?.cards_page_type);
+
+//   return (
+//       <Card
+//         module={module}
+//         mobileColumns={1}
+//         tabletColumns={2}
+//         desktopColumns={3}
+//         CustomCardComponent={customCardComponent}
+//         pageTemplate={page?.template}
+//       />
+//   );
+// };
+
+/* eslint-disable camelcase */
+import React, { Suspense } from 'react';
+import PropTypes from 'prop-types';
 import { getCard } from '../../../../helpers/cards';
+import styles from './cards.module.scss';
+import Card from '~atoms/cards/default-card';
+import keygen from '~helpers/keygen';
+
+const Cards = ({ module, page }) => {
+  const CustomCardComponent = getCard(module?.model_type || module?.cards_page_type);
 
-export default ({ module, page }) => {
-  const customCardComponent = getCard(module?.model_type || module?.cards_page_type);
   return (
-    <Card
-      module={module}
-      mobileColumns={1}
-      tabletColumns={2}
-      desktopColumns={3}
-      CustomCardComponent={customCardComponent}
-      pageTemplate={page?.template}
-    />
+    <div className={styles.cardsContainer}>
+      {module.items &&
+        module.items.map((item, index) =>
+          CustomCardComponent ? (
+            <Suspense fallback={<></>}>
+              <CustomCardComponent
+                key={keygen()}
+                featured={module.style === 'featured'}
+                item={item}
+                type={item.type}
+                number={index + 1}
+                page={page}
+              />
+            </Suspense>
+          ) : (
+            <Card key={keygen()} item={item} />
+          )
+        )}
+    </div>
   );
 };
+
+Cards.propTypes = {
+  module: PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    items: PropTypes.arrayOf(PropTypes.object),
+    featured_index: PropTypes.number,
+    style: PropTypes.string,
+  }).isRequired,
+  page: PropTypes.shape({}),
+};
+
+export default Cards;

package/src/components/organisms/cards/template-two/index.js

@@ -3,7 +3,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import ScrollX from 'gatsby-core-theme/src/hooks/scroll-x';
-import Compoo from './item';
+import Item from './item';
 import Buttons from './buttons';
 
 const CustomCarousel = ({ page, module, noModuleIntro }) => {
@@ -50,7 +50,7 @@ const CustomCarousel = ({ page, module, noModuleIntro }) => {
       <div ref={container}>
         {module.items &&
           module.items.map((item, index) => (
-            <Compoo key={index} index={index} item={item} page={page} module={module} />
+            <Item key={index} index={index} item={item} page={page} module={module} />
           ))}
         {showButtons && (
           <Buttons

package/src/components/organisms/cards/template-two/item/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/forbid-prop-types */
-import React, { memo } from 'react';
+import React, { memo, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { getCard } from '../../../../../helpers/cards';
 import keygen from '~helpers/keygen';
@@ -7,14 +7,16 @@ import keygen from '~helpers/keygen';
 const CustomCardComponent = memo(({ module, item, page, index, template = 'template_five' }) => {
   const Compo = getCard(module.model_type || module.cards_page_type, template);
   return (
-    <Compo
-      key={keygen()}
-      featured={module.style === 'featured'}
-      item={item}
-      type={item.type}
-      number={index + 1}
-      page={page}
-    />
+    <Suspense fallback={<></>}>
+      <Compo
+        key={keygen()}
+        featured={module.style === 'featured'}
+        item={item}
+        type={item.type}
+        number={index + 1}
+        page={page}
+      />
+    </Suspense>
   );
 });
 

package/src/constants/ratings-constant.js

@@ -1,9 +1,10 @@
 /* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable import/prefer-default-export */
 import React from 'react';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
 
-export default {
+export const operatorRatings = {
   operator: [
     {
       fieldLabel: 'Overall',

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

@@ -1,17 +1,16 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable react/no-danger */
-import React, { useState } from 'react';
+import React, { useState, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import loadable from '@loadable/component';
 import ScrollToTop from '~atoms/scroll-to-top';
 import CookieConsent from '~organisms/cookie-consent';
 import isSticky from '~hooks/stickyOnScroll';
+import styles from './floating-area.module.scss';
 
 export default function FloatingArea({
   pageContext,
   template,
-  customStyles,
   hideOperatorBanner = false,
   offsetTop = 400,
 }) {
@@ -28,30 +27,32 @@ export default function FloatingArea({
 
   const OperatorBanner =
     pageType === 'operator' && !hideBanner && !hideOperatorBanner
-      ? loadable(() => import(`gatsby-core-theme/src/components/molecules/bonus/template-two`))
+      ? lazy(() => import(`gatsby-core-theme/src/components/molecules/bonus/template-two`))
       : null;
 
   const FooterNavigation =
     footerNavigationData && footerNavigationData?.modules?.length > 0 && pageType !== 'operator'
-      ? loadable(() => import(`gatsby-core-theme/src/components/organisms/footer-navigation`))
+      ? lazy(() => import(`gatsby-core-theme/src/components/organisms/footer-navigation`))
       : null;
 
   return (
-    <div className={`${customStyles.floatingArea} ${showScroll ? customStyles.show : ''}`}>
+    <div className={`${styles.floatingArea} ${showScroll ? styles.show : ''}`}>
       <ScrollToTop />
       {!['not_recommended', 'inactive', 'blacklisted'].includes(
         pageContext?.page?.relation?.status
       ) &&
         OperatorBanner && (
-          <OperatorBanner
-            type={pageType}
-            template={template}
-            sticky
-            logo={pageContext.page.relation.logo_url}
-            operator={pageContext.page.relation}
-            closedBanner={closedBanner}
-            setClosedBanner={setClosedBanner}
-          />
+          <Suspense fallback={<></>}>
+            <OperatorBanner
+              type={pageType}
+              template={template}
+              sticky
+              logo={pageContext.page.relation.logo_url}
+              operator={pageContext.page.relation}
+              closedBanner={closedBanner}
+              setClosedBanner={setClosedBanner}
+            />
+          </Suspense>
         )}
       {CookieConsent && (
         <CookieConsent
@@ -71,7 +72,11 @@ export default function FloatingArea({
           </p>
         </CookieConsent>
       )}
-      {FooterNavigation && <FooterNavigation section={footerNavigationData} />}
+      {FooterNavigation && (
+        <Suspense fallback={<></>}>
+          <FooterNavigation section={footerNavigationData} />
+        </Suspense>
+      )}
     </div>
   );
 }
@@ -97,7 +102,6 @@ FloatingArea.propTypes = {
       }),
     }),
   }).isRequired,
-  customStyles: PropTypes.string,
   offsetTop: PropTypes.number,
   hideOperatorBanner: PropTypes.bool,
   template: PropTypes.string,

package/src/gatsby-core-theme/components/molecules/header/header.module.scss

@@ -19,4 +19,28 @@
     margin: 0 auto;
     padding: 2rem;
   }
+}
+
+.skeletonoperator {
+  min-height: 37.5rem;
+
+  @include min(tablet) { 
+    min-height: 48.2rem;
+  }
+}
+
+.skeletongame {
+  min-height: 28rem;
+
+  @include min(tablet) { 
+    min-height: 33rem;
+  }
+}
+
+.skeletonpayment {
+  min-height: 64.6rem;
+
+  @include min(tablet) { 
+    min-height: 57.1rem;
+  }
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import '~tests/helpers/match-media.mock';
-import Header, { relationContent } from '.';
+import Header from '.';
 
 function getHeaderSection(type = 'page', template = 'author') {
   const header = {
@@ -31,20 +31,6 @@ function getHeaderSection(type = 'page', template = 'author') {
 }
 
 describe('header component', () => {
-  test('relationContent', () => {
-    const list = ['article', 'operator', 'game', 'author'];
-
-    const all = list.reduce((acc, current) => {
-      acc.push(getHeaderSection(current, current));
-      return acc;
-    }, []);
-
-    all.forEach((elm) => {
-      expect(relationContent(elm.section)).toBeTruthy();
-    });
-    expect(relationContent('test')).toBeFalsy();
-  });
-
   test('only page', () => {
     const HeaderProps = getHeaderSection('page', 'default');
     const { container } = render(<Header {...HeaderProps} />);