gatsby-matrix-theme 53.2.44 → 53.2.45

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [53.2.45](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.2.44...v53.2.45) (2025-09-05)
+
+
+### Bug Fixes
+
+* add lazy load for icon ([c9e5c9a](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/c9e5c9a9e08578ae1e0e834f720ca23171d300a3))
+* fix icon ([dd6bddc](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/dd6bddc0c37f5e6d4ae9e4e71801371a1e7ad363))
+* update lazy ([0610a04](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/0610a040dd040042257ba77eb6d74986ea61ea92))
+* update theme ([7a676b8](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/7a676b8888dd43e30412daf88b28a72a4001f444))
+
+
+* Merge branch 'en-8-perfomence' into 'master' ([8926354](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/8926354efca5f2feb9e2bec783cef26ba6b4508a))
+
 ## [53.2.44](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.2.43...v53.2.44) (2025-09-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.2.44",
+  "version": "53.2.45",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/atoms/cards/operator-card/template-four/index.js

@@ -1,16 +1,17 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import PropTypes from 'prop-types';
 import { BiLike } from '@react-icons/all-files/bi/BiLike';
 import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
 import BonusTemplateDefault from 'gatsby-core-theme/src/components/molecules/bonus-box/template-three';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
-import Verify from '~images/icons/verify';
 import OperatorDetails from '../../../../molecules/operator-details';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-four.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateFour = ({
   item,
   useOneStarRating = true,
@@ -20,7 +21,7 @@ const TemplateFour = ({
   showRatingLabel = false,
   showRatingDecimal = false,
   authorTemplateTwo = true,
-  verifyIcon = <Verify />,
+  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   showBonusForAll = false,
   width = 88,
   height = 88,

package/src/components/atoms/cards/operator-card/template-four/template-four.stories.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import {
   Title,
   Description,
@@ -8,11 +8,11 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
-import Verify from '~images/icons/verify';
 import TemplateFour from '.';
 import styles from './template-four.module.scss';
 
 const operatorData = getSampleOperatorCards();
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
 
 export default {
   title: 'Theme/Modules/Cards/Operator/Template Four',
@@ -27,7 +27,7 @@ export default {
     verifyIcon: {
       name: 'verifyIcon',
       type: { name: 'element', required: false },
-      defaultValue: <Verify />,
+      defaultValue: <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
       description: 'verify icon',
     },
     page: {

package/src/components/atoms/cards/operator-card/template-one/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { FaCheck } from '@react-icons/all-files/fa/FaCheck';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
@@ -10,13 +10,14 @@ import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
-import Verify from '~images/icons/verify';
 import OperatorDetails from '../../../../molecules/operator-details';
 import styles from './template-one.module.scss';
 import Bonus from '~molecules/bonus-box/template-one';
 import { TrackingKeys } from '~constants/tracking-api';
 import VariableComponent from '../variables';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateOne = ({
   showRibbon = false,
   item,
@@ -31,7 +32,7 @@ const TemplateOne = ({
   authorTemplateTwo = true,
   sellingPointsIcon = <FaCheck title="Check Icon" />,
   showBonusForAll = false,
-  verifyIcon = <Verify />,
+  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   showOperatorCta = true,
   operatorLogoWidth = 88,
   operatorLogoHeight = 88,

package/src/components/atoms/cards/operator-card/template-one/template-one.stories.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import {
   Title,
   Description,
@@ -8,9 +8,10 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
-import Verify from '~images/icons/verify';
 import TemplateOne from '.';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const operatorData = getSampleOperatorCards();
 
 export default {
@@ -33,7 +34,7 @@ export default {
     verifyIcon: {
       name: 'verifyIcon',
       type: { name: 'element', required: false },
-      defaultValue: <Verify />,
+      defaultValue: <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
       description: 'verify icon',
     },
     page: {

package/src/components/atoms/cards/operator-card/template-three/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { BiLike } from '@react-icons/all-files/bi/BiLike';
 import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
@@ -7,19 +7,20 @@ import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import BonusTemplateDefault from 'gatsby-core-theme/src/components/molecules/bonus-box/template-three';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
-import Verify from '~images/icons/verify';
 import OperatorDetails from '../../../../molecules/operator-details';
 import VariableComponent from '../variables';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-three.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateThree = ({
   showRibbon = false,
   item,
   useOneStarRating = true,
   page,
   showAuthor = true,
-  verifyIcon = <Verify />,
+  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   showRatingLabel = false,
   showRatingDecimal = false,
   authorTemplateTwo = true,

package/src/components/atoms/cards/operator-card/template-two/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Link from 'gatsby-core-theme/src/hooks/link';
@@ -7,12 +7,13 @@ import BonusTemplateDefault from 'gatsby-core-theme/src/components/molecules/bon
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
-import Verify from '~images/icons/verify';
 import VariableComponent from '../variables';
 import OperatorDetails from '../../../../molecules/operator-details';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-two.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateTwo = ({
   showRibbon = false,
   item,
@@ -25,7 +26,7 @@ const TemplateTwo = ({
   authorTemplateTwo = true,
   contentRibbon = false,
   hasVariableComponent = false,
-  verifyIcon = <Verify />,
+  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   showBonusForAll = false,
   operatorLogoWidth = 88,
   operatorLogoHeight = 88,

package/src/components/atoms/disclaimer/affiliate-disclaimer/index.js

@@ -1,16 +1,17 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable camelcase */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 
 import Tooltip from '../../tooltip';
-import AffiliateDisclaimerIcon from '../../../../images/icons/affiliate-disclaimer';
 import styles from './affiliate-disclaimer.module.scss';
 
+const AffiliateDisclaimerIcon = lazy(() => import('../../../../images/icons/affiliate-disclaimer'));
+
 const AffiliateDisclaimer = ({
   showIcon = true,
-  icon = <AffiliateDisclaimerIcon />,
+  icon = <Suspense fallback={<></>}><AffiliateDisclaimerIcon /></Suspense>,
   className = '',
   direction = 'bottom',
   content,

package/src/components/atoms/review-credits/index.js

@@ -1,21 +1,22 @@
 /* eslint-disable arrow-body-style */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
 import { formatDate } from '~helpers/date-time';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import Collapse from '~atoms/collapse';
 import Author from '../author/template-three';
-import ContributorsIcon from '../../../images/icons/contributors';
-import FactCheckIcon from '~images/icons/fact-check';
-import Clock from '~images/icons/clock';
 import styles from './review-credits.module.scss';
 
+const ContributorsIcon = lazy(() => import('../../../images/icons/contributors'));
+const FactCheckIcon = lazy(() => import('~images/icons/fact-check'));
+const Clock = lazy(() => import('~images/icons/clock'));
+
 const ReviewCredits = ({
   authors,
   authorImageWidth = 48,
   authorImageHeight = 48,
-  clock = <Clock />,
+  clock = <Suspense fallback={<></>}><Clock /></Suspense>,
   date,
   dateFormat = 'DD.MM.YYYY',
   showLinks=true,
@@ -41,7 +42,7 @@ const ReviewCredits = ({
   showVerification = true,
   splitDateFormat = '.',
   type = 'default',
-  verifyIcon = <FactCheckIcon width={15} height={15} />,
+  verifyIcon = <Suspense fallback={<></>}><FactCheckIcon width={15} height={15} /></Suspense>,
   incommingClass='',
 }) => {
   const getPrefixBasedOnPage = type.includes('review')
@@ -152,7 +153,7 @@ const ReviewCredits = ({
 
   const buttonText = (
     <>
-      <ContributorsIcon />
+      <Suspense fallback={<></>}><ContributorsIcon /></Suspense>
       {useTranslate('contributors', 'About this page')}
     </>
   );

package/src/components/molecules/header/variants/author/assets/name/index.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
-import Verify from '~images/icons/verify';
 import styles from './name.module.scss';
 
-export default function Name({ className = '', name, icon = <Verify />, pronouns = '' }) {
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
+export default function Name({ className = '', name, icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>, pronouns = '' }) {
   return (
     <div className={styles.title}>
       <h1 className={`${className || ''} ${styles?.name || ''}`}>

package/src/components/molecules/header/variants/operator/template-five/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
 import { imagePrettyUrl, getObjectValue } from '~helpers/getters';
@@ -10,11 +10,12 @@ import OperatorBanner from '~atoms/header-operator-bannner';
 import { operatorRatings } from '~constants/ratings-constant';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api'
-import Verify from '~images/icons/verify';
 import PrettyLink from '~atoms/pretty-link';
 
 import styles from './template-five.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateFive = ({
   relation,
   image,
@@ -24,7 +25,7 @@ const TemplateFive = ({
   extraFields,
   type,
   numOfStars = 5,
-  icon = <Verify color="#295DD6" />,
+  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   showRoundedRating = false,
   operatorLogoWidth = 208,
   operatorLogoHeight = 208,

package/src/components/molecules/header/variants/operator/template-four/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
@@ -10,12 +10,13 @@ import OperatorBanner from '~atoms/header-operator-bannner';
 import Ribbon from '~atoms/ribbons';
 import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import Verify from '~images/icons/verify';
 import VariableComponent from '../variables';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-four.module.scss';
 import PrettyLink from '~atoms/pretty-link';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateFour = ({
   relation,
   type,
@@ -23,7 +24,7 @@ const TemplateFour = ({
   name,
   ribbons,
   pageTemplate,
-  icon = <Verify color="#295DD6" />,
+  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   numOfStars = 5,
   hasVariableComponent = false,
   showRoundedRating = false,

package/src/components/molecules/header/variants/operator/template-three/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { imagePrettyUrl } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
@@ -7,12 +7,13 @@ import LazyImage from '~hooks/lazy-image';
 import Rating from '~atoms/ratings';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import Ribbons from '~atoms/ribbons';
-import Verify from '~images/icons/verify';
 import VariableComponent from '../variables';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-three.module.scss';
 import PrettyLink from '~atoms/pretty-link';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateThree = ({
   relation,
   type,
@@ -21,7 +22,7 @@ const TemplateThree = ({
   ribbons,
   numOfStars,
   pageTemplate,
-  icon = <Verify color="#295DD6" />,
+  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   hasVariableComponent = false,
   width = 179,
   height = 179,

package/src/components/molecules/header/variants/payment/template-five/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
@@ -9,10 +9,11 @@ import OperatorBanner from '~atoms/header-operator-bannner';
 import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
-import Verify from '~images/icons/verify';
 
 import styles from './template-five.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateOneThree = ({
   relation,
   type,
@@ -20,7 +21,7 @@ const TemplateOneThree = ({
   image,
   sections = {},
   pageTemplate,
-  icon = <Verify color="#295DD6" />,
+  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   description,
   numOfStars,
   CostumeComponent = null,

package/src/components/molecules/header/variants/payment/template-four/index.js

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { imagePrettyUrl } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import LazyImage from '~hooks/lazy-image';
 import Rating from '~atoms/ratings';
 import OperatorBanner from '~atoms/header-operator-bannner';
-import Verify from '~images/icons/verify';
 import { TrackingKeys } from '~constants/tracking-api'
 import styles from './template-four.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateFour = ({
   relation,
   type,
@@ -16,7 +17,7 @@ const TemplateFour = ({
   name,
   sections = {},
   pageTemplate,
-  icon = <Verify color="#295DD6" />,
+  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   numOfStars = 5,
   showRoundedRating = false,
   width = 300,

package/src/components/molecules/header/variants/payment/template-one-three/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
 import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
@@ -10,10 +10,11 @@ import OperatorBanner from '~atoms/header-operator-bannner';
 import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
-import Verify from '~images/icons/verify';
-
 import styles from './template-one-three.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
+
 const TemplateOneThree = ({
   relation,
   type,
@@ -21,7 +22,7 @@ const TemplateOneThree = ({
   image,
   sections = {},
   pageTemplate,
-  icon = <Verify color="#295DD6" />,
+  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   description,
   numOfStars,
   template = 'template_one',

package/src/components/molecules/header/variants/payment/template-two/index.js

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-danger */
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
+import styles from './template-two.module.scss';
 import { getAltText } from '~helpers/image';
 import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
@@ -10,9 +11,9 @@ import OperatorBanner from '~atoms/header-operator-bannner';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
 
-import Verify from '~images/icons/verify';
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 
-import styles from './template-two.module.scss';
 
 const TemplateTwo = ({
   relation,
@@ -20,7 +21,7 @@ const TemplateTwo = ({
   image,
   sections = {},
   pageTemplate,
-  icon = <Verify color="#295DD6" />,
+  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   description,
   numOfStars,
   showRoundedRating = false,

package/src/components/molecules/header/variants/slot/template-one/index.js

@@ -1,19 +1,19 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
-
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
+import styles from './slot.module.scss';
 import { imagePrettyUrl } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import Rating from '~atoms/ratings';
-import Verify from '~images/icons/verify';
 import { TrackingKeys } from '~constants/tracking-api'
 
-import styles from './slot.module.scss';
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 
 export default function SlotHeader({
   page,
-  image = <Verify />,
+  image = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
   showExtraRatings = false,
   width = 170,
   height = 170,

package/src/components/molecules/header/variants/slot/template-two/index.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
-
+import styles from './template-two.module.scss';
 import { imagePrettyUrl } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import Tnc from '~molecules/tnc';
@@ -8,13 +8,13 @@ import LazyImage from '~hooks/lazy-image';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import Verify from '~images/icons/verify';
 import { TrackingKeys } from '~constants/tracking-api'
 
-import styles from './template-two.module.scss';
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 
-const TemplateTwo = ({ page, image = <Verify />, width = 259, height = 259, moduleName = TrackingKeys?.HEADERSLOTS }) => {
-  const imageObject = page.relation?.logo
+const TemplateTwo = ({ page, image = <Suspense fallback={<></>}><VerifyIcon /></Suspense>, width = 259, height = 259, moduleName = TrackingKeys?.HEADERSLOTS }) => {
+  const imageObject = page.relation?.logo;
   // eslint-disable-next-line react/prop-types
   const headerBonus = page?.sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');
   return (

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

@@ -1,44 +1,78 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-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';
-import TemplateThree from './template-three';
+import ModuleIntroduction from './module-introduction';
 
 export default function index({ module, page, seeMoreButtonDown = false, modulePosition }) {
   // eslint-disable-next-line no-unused-expressions
-  module.style === 'template_three' ? seeMoreButtonDown = true : seeMoreButtonDown
+  module.style === 'template_three' ? (seeMoreButtonDown = true) : seeMoreButtonDown;
   const templateThree = module.style === 'template_three';
+  const ComparisonTableComponent = lazy(() => import('../../atoms/cards/comparison-table'));
+
+  const OperatorsTableComponent = lazy(() => import('../../atoms/cards/operators-table'));
+
+  const GridLayoutComponent = lazy(() => import('./template-one'));
+
+  const SrcollLayoutComponent = lazy(() => import('./template-two'));
+
+  const TemplateThreeComponent = lazy(() => import('./template-three'));
+
   const Component = () => {
     switch (module?.style) {
       case 'stack_table': {
         if (module.cards_page_type === 'operator') {
-          return <OperatorsTable module={module} page={page} modulePosition={modulePosition} />;
+          return (
+            <Suspense fallback={<></>}>
+              <OperatorsTableComponent
+                module={module}
+                page={page}
+                modulePosition={modulePosition}
+              />
+            </Suspense>
+          );
         }
         return null;
       }
       case 'comparison_table': {
         if (module.cards_page_type === 'operator') {
-          return <ComparisonTable module={module} page={page} modulePosition={modulePosition} />;
+          return (
+            <Suspense fallback={<></>}>
+              <ComparisonTableComponent
+                module={module}
+                page={page}
+                modulePosition={modulePosition}
+              />
+            </Suspense>
+          );
         }
         return null;
       }
       case 'template_two': {
         return (
-          <SrcollLayout module={module} page={page} modulePosition={modulePosition} />
+          <Suspense fallback={<></>}>
+            <SrcollLayoutComponent module={module} page={page} modulePosition={modulePosition} />
+          </Suspense>
         );
       }
       case 'template_three': {
         return (
-          <TemplateThree module={module} page={page} modulePosition={modulePosition} templateThree />
+          <Suspense fallback={<></>}>
+            <TemplateThreeComponent
+              module={module}
+              page={page}
+              modulePosition={modulePosition}
+              templateThree
+            />
+          </Suspense>
         );
       }
       default: {
-        return <GridLayout module={module} page={page} modulePosition={modulePosition} />;
+        return (
+          <Suspense fallback={<></>}>
+            <GridLayoutComponent module={module} page={page} modulePosition={modulePosition} />
+          </Suspense>
+        );
       }
     }
   };