gatsby-matrix-theme 53.2.45 → 54.0.0-poc.2

package/.ci.yml

@@ -55,6 +55,8 @@ Theme Beta Publish:
   tags:
     - gatsby-runner-dev-docker
   before_script:
+    - echo "@gigmedia:registry=https://registry.npmjs.org/" >> ~/.npmrc
+    - echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" >> ~/.npmrc
     - git config --global http.sslverify false
     - git config --global user.email "floyd@gig.com"
     - git config --global user.name "floyd"
@@ -70,3 +72,27 @@ Theme Beta Publish:
       - beta
     variables:
       - $PIPELINE != "beta-content"
+
+Theme POC Publish:
+  image: node:18.17.0
+  stage: publish-poc
+  tags:
+    - gatsby-runner-dev-docker
+  before_script:
+    - echo "@gigmedia:registry=https://registry.npmjs.org/" >> ~/.npmrc
+    - echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" >> ~/.npmrc
+    - git config --global http.sslverify false
+    - git config --global user.email "floyd@gig.com"
+    - git config --global user.name "floyd"
+  script:
+    - export HUSKY=0
+    - yarn config set cache-folder .yarn
+    - yarn
+    - cd matrix-theme/
+    - npx semantic-release@22.0.0
+  when: manual
+  only:
+    refs:
+      - poc
+    variables:
+      - $PIPELINE != "content-trigger"

package/CHANGELOG.md

@@ -1,15 +1,34 @@
-## [53.2.45](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.2.44...v53.2.45) (2025-09-05)
+# [54.0.0-poc.2](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v54.0.0-poc.1...v54.0.0-poc.2) (2025-09-05)
+
+
+### Config
+
+* update poc version ([c08fc2a](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/c08fc2ad0e5bdb45c6348e8cb1c1d6cb771a4758))
+
+# [54.0.0-poc.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.2.44...v54.0.0-poc.1) (2025-09-04)
 
 
 ### 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))
+* "@endemolshinegroup/cosmiconfig-typescript-loader" "^3.0.2" ([de1010c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/de1010cfd94fae08954af66af49f2babc167f50e))
+* added ci cd ([bca9431](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/bca94314f737f408c342932de9a9ec65438667b1))
+* path ([84a9b14](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/84a9b14e8d79ffe3786954a526c30d83a9e2cb5c))
+* publish poc ([1920c0b](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/1920c0b3d1a0db050e6c268b3e86b5f73404399d))
+* switch to live hercules ([76bff27](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/76bff27421d16a0ecace231e05a1f6ef9f7d1c65))
+
+
+### chore
+
+* **release:** 53.2.35-poc.1 [skip ci] ([f5a3ac5](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/f5a3ac51f42d0dfdd281db1442e58739b39e6d9e))
+* **release:** 53.2.35-poc.2 [skip ci] ([9df783d](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/9df783d9eb1c236fb9e802b03908b4fcfe7b5bc1))
+
+
+### Config
+
+* switch core theme to poc version ([f6fe61f](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/f6fe61f5299507f85c50df803126bdeeb5960729))
 
 
-* Merge branch 'en-8-perfomence' into 'master' ([8926354](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/8926354efca5f2feb9e2bec783cef26ba6b4508a))
+* Merge branch 'master' into poc ([e308aa1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/e308aa174e645443cb49291568bc08d6fcc68bec))
 
 ## [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.45",
+  "version": "54.0.0-poc.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "44.4.52",
+    "gatsby-core-theme": "44.5.0-poc.2 ",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",

package/release.config.js

@@ -92,6 +92,11 @@ module.exports = {
 
     '@semantic-release/git',
   ],
+  branches: [
+    'master',
+    { name: 'beta', prerelease: true },
+    { name: 'poc', prerelease: true }
+  ],
   release: {
     extends: '@semantic-release/gitlab-config',
     prepare: [

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

@@ -1,17 +1,16 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { Suspense, lazy } from 'react';
+import React 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,
@@ -21,7 +20,7 @@ const TemplateFour = ({
   showRatingLabel = false,
   showRatingDecimal = false,
   authorTemplateTwo = true,
-  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  verifyIcon = <Verify />,
   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, { lazy, Suspense } from 'react';
+import React 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: <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+      defaultValue: <Verify />,
       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, { lazy, Suspense } from 'react';
+import React 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,14 +10,13 @@ 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,
@@ -32,7 +31,7 @@ const TemplateOne = ({
   authorTemplateTwo = true,
   sellingPointsIcon = <FaCheck title="Check Icon" />,
   showBonusForAll = false,
-  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  verifyIcon = <Verify />,
   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, { lazy, Suspense } from 'react';
+import React from 'react';
 import {
   Title,
   Description,
@@ -8,10 +8,9 @@ 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 {
@@ -34,7 +33,7 @@ export default {
     verifyIcon: {
       name: 'verifyIcon',
       type: { name: 'element', required: false },
-      defaultValue: <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+      defaultValue: <Verify />,
       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, { lazy, Suspense } from 'react';
+import React 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,20 +7,19 @@ 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 = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  verifyIcon = <Verify />,
   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, { lazy, Suspense } from 'react';
+import React 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,13 +7,12 @@ 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,
@@ -26,7 +25,7 @@ const TemplateTwo = ({
   authorTemplateTwo = true,
   contentRibbon = false,
   hasVariableComponent = false,
-  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  verifyIcon = <Verify />,
   showBonusForAll = false,
   operatorLogoWidth = 88,
   operatorLogoHeight = 88,

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

@@ -1,17 +1,16 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable camelcase */
-import React, { lazy, Suspense } from 'react';
+import React 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 = <Suspense fallback={<></>}><AffiliateDisclaimerIcon /></Suspense>,
+  icon = <AffiliateDisclaimerIcon />,
   className = '',
   direction = 'bottom',
   content,

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

@@ -1,22 +1,21 @@
 /* eslint-disable arrow-body-style */
-import React, { lazy, Suspense } from 'react';
+import React 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 = <Suspense fallback={<></>}><Clock /></Suspense>,
+  clock = <Clock />,
   date,
   dateFormat = 'DD.MM.YYYY',
   showLinks=true,
@@ -42,7 +41,7 @@ const ReviewCredits = ({
   showVerification = true,
   splitDateFormat = '.',
   type = 'default',
-  verifyIcon = <Suspense fallback={<></>}><FactCheckIcon width={15} height={15} /></Suspense>,
+  verifyIcon = <FactCheckIcon width={15} height={15} />,
   incommingClass='',
 }) => {
   const getPrefixBasedOnPage = type.includes('review')
@@ -153,7 +152,7 @@ const ReviewCredits = ({
 
   const buttonText = (
     <>
-      <Suspense fallback={<></>}><ContributorsIcon /></Suspense>
+      <ContributorsIcon />
       {useTranslate('contributors', 'About this page')}
     </>
   );

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

@@ -1,10 +1,9 @@
-import React, { lazy, Suspense } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import Verify from '~images/icons/verify';
 import styles from './name.module.scss';
 
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
-
-export default function Name({ className = '', name, icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>, pronouns = '' }) {
+export default function Name({ className = '', name, icon = <Verify />, 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, { lazy, Suspense } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
 import { imagePrettyUrl, getObjectValue } from '~helpers/getters';
@@ -10,12 +10,11 @@ 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,
@@ -25,7 +24,7 @@ const TemplateFive = ({
   extraFields,
   type,
   numOfStars = 5,
-  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  icon = <Verify color="#295DD6" />,
   showRoundedRating = false,
   operatorLogoWidth = 208,
   operatorLogoHeight = 208,

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

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import React 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,13 +10,12 @@ 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,
@@ -24,7 +23,7 @@ const TemplateFour = ({
   name,
   ribbons,
   pageTemplate,
-  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  icon = <Verify color="#295DD6" />,
   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, { lazy, Suspense } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { imagePrettyUrl } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
@@ -7,13 +7,12 @@ 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,
@@ -22,7 +21,7 @@ const TemplateThree = ({
   ribbons,
   numOfStars,
   pageTemplate,
-  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  icon = <Verify color="#295DD6" />,
   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, lazy, Suspense } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
@@ -9,11 +9,10 @@ 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,
@@ -21,7 +20,7 @@ const TemplateOneThree = ({
   image,
   sections = {},
   pageTemplate,
-  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  icon = <Verify color="#295DD6" />,
   description,
   numOfStars,
   CostumeComponent = null,

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

@@ -1,15 +1,14 @@
-import React, { lazy, Suspense } from 'react';
+import React 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,
@@ -17,7 +16,7 @@ const TemplateFour = ({
   name,
   sections = {},
   pageTemplate,
-  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  icon = <Verify color="#295DD6" />,
   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, lazy, Suspense } from 'react';
+import React, { useState, useRef } 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,9 @@ 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 styles from './template-one-three.module.scss';
-
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
+import Verify from '~images/icons/verify';
 
+import styles from './template-one-three.module.scss';
 
 const TemplateOneThree = ({
   relation,
@@ -22,7 +21,7 @@ const TemplateOneThree = ({
   image,
   sections = {},
   pageTemplate,
-  icon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  icon = <Verify color="#295DD6" />,
   description,
   numOfStars,
   template = 'template_one',

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

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

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

@@ -1,19 +1,19 @@
-import React, { lazy, Suspense } from 'react';
+import React 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'
 
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
-
+import styles from './slot.module.scss';
 
 export default function SlotHeader({
   page,
-  image = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  image = <Verify />,
   showExtraRatings = false,
   width = 170,
   height = 170,

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

@@ -1,6 +1,6 @@
-import React, { lazy, Suspense } from 'react';
+import React 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'
 
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
-
+import styles from './template-two.module.scss';
 
-const TemplateTwo = ({ page, image = <Suspense fallback={<></>}><VerifyIcon /></Suspense>, width = 259, height = 259, moduleName = TrackingKeys?.HEADERSLOTS }) => {
-  const imageObject = page.relation?.logo;
+const TemplateTwo = ({ page, image = <Verify />, 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 (