gatsby-core-theme 44.4.47 → 44.4.48

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [44.4.48](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.47...v44.4.48) (2025-09-02)
+
+
+### Bug Fixes
+
+* add lazy for comoponents ([732fdf7](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/732fdf7c10c3bbd1e46ca1d2f4bef04d879c8409))
+
+
+* Merge branch 'en-8-cwv-unused-js' into 'master' ([bcc5448](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/bcc5448cfce871e8189c7fbd42493c6f1d4c477e))
+
 ## [44.4.47](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.4.46...v44.4.47) (2025-09-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.4.47",
+  "version": "44.4.48",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/author/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable arrow-body-style */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 
 import { formatDate } from '~helpers/date-time';
@@ -8,10 +8,11 @@ import { imagePrettyUrl } from '~helpers/getters';
 import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import Verify from '~images/icons/verify';
-import Clock from '~images/icons/clock';
 import styles from './author.module.scss';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+const ClockIcon = lazy(() => import('~images/icons/clock'));
+
 const Author = ({
   name,
   date,
@@ -26,11 +27,11 @@ const Author = ({
   isCardsAuthor = false,
   hasAuthorBox = false,
   reviewer,
-  clock = <Clock />,
+  clock = <Suspense fallback={null}><ClockIcon /></Suspense>,
   authorImageWidth = 30,
   authorImageHeight = 30,
   showVerification = false,
-  verifyIcon = <Verify />,
+  verifyIcon = <Suspense fallback={null}><VerifyIcon /></Suspense>,
 }) => {
   const prefixstyle = !link || !authorImg;
 

package/src/components/molecules/header/variants/operator/template-one-two/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';
@@ -7,7 +7,6 @@ import { getAltText } from '~helpers/image';
 import LazyImage from '~hooks/lazy-image';
 import StarRating from '~molecules/star-rating/one-star';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import Verify from '~images/icons/verify';
 import Rating from '~atoms/ratings';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import VariableComponent from '../variables';
@@ -16,6 +15,8 @@ import { TrackingKeys } from '~constants/tracking-api'
 import PrettyLink from '~atoms/pretty-link';
 import Ribbons from '~atoms/ribbons';
 
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
+
 const TemplateOneTwo = ({
   relation,
   type,
@@ -70,7 +71,7 @@ const TemplateOneTwo = ({
         >
           <div className={styles.name}>
             <h1>{name}</h1>
-            {icon || <Verify />}
+            {icon || <Suspense fallback={null}><VerifyIcon /></Suspense>}
           </div>
           {ribbon && <Ribbons customStyle={template === 'template_two' ? styles.templateTwoRibbon : ''} item={[relation.ribbons[0]]} /> }
           {!['coming_soon', 'inactive'].includes(relation?.status) ? (

package/src/components/molecules/header/variants/operator/template-one-two/template-one-two.stories.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { lazy } from "react";
 import TemplateOne from ".";
 import getOperatorData from "../../../../../../../tests/factories/relations/operator.factory";
-import Verify from '~images/icons/verify';
+
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
 
 const pageOperatorData = getOperatorData();
 
@@ -45,7 +46,7 @@ export default {
     },
     icon: {
       name: "Icon",
-      defaultValue: <Verify />,
+      defaultValue: <VerifyIcon />,
     },
   },
 };

package/src/components/molecules/header/variants/slot/template-one/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';
@@ -6,14 +6,15 @@ import { imagePrettyUrl } from '~helpers/getters';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import Rating from '~atoms/ratings';
 import { getAltText } from '~helpers/image';
-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,
   moduleName = TrackingKeys?.HEADERSLOTS,
-  image = <Verify />,
+  image = <Suspense fallback={null}><VerifyIcon /></Suspense>,
   showExtraRatings = false,
   width = 170,
   height = 170,

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

@@ -1,7 +1,8 @@
 /* eslint-disable react/destructuring-assignment */
-import React from 'react';
+import React, { lazy } from 'react';
 import TemplateOne from '.';
-import Verify from '~images/icons/verify';
+
+const VerifyIcon = lazy(() => import('~images/icons/verify'));
 
 export default {
   title: 'Theme/Layout/Header/Games/Template One',
@@ -67,6 +68,6 @@ Default.args = {
       },
     },
   },
-  image: <Verify />,
+  image: <VerifyIcon />,
   headerBonus: true,
 };

package/src/components/organisms/cookie-consent/index.js

@@ -1,70 +1,78 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect, lazy, Suspense } from "react";
+import PropTypes from "prop-types";
 
-import useTranslate from '~hooks/useTranslate/useTranslate';
-import { setCookie, getCookie } from '~helpers/cookies';
-import CookieModal from '../../molecules/cookie-modal';
-import styles from './cookie-consent.module.scss';
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import { setCookie, getCookie } from "~helpers/cookies";
+import styles from "./cookie-consent.module.scss";
 
 const CookieConsent = ({
-  acceptText = 'Accept',
-  rejectText = 'Reject',
+  acceptText = "Accept",
+  rejectText = "Reject",
   settingsCookie,
   children,
-  cookieName = 'CookieConsent',
-  logo = '/images/logo.svg',
+  cookieName = "CookieConsent",
+  logo = "/images/logo.svg",
   icon = null,
-  showRejectButton=false
+  showRejectButton = false,
 }) => {
   const [showModal, setShowModal] = useState(false);
 
   const [showCookieConsent, setShowCookieConsent] = useState(false);
 
+  const CookieModal = lazy(() => import("../../molecules/cookie-modal"));
+
   // when user declines
   const handleDecline = () => {
-    setCookie(cookieName, false, 365, '/');
-    setCookie('showCookie', false, 365, '/');
+    setCookie(cookieName, false, 365, "/");
+    setCookie("showCookie", false, 365, "/");
     setShowCookieConsent(false);
     setShowModal(false);
-    document.body.style.overflow = 'auto';
+    document.body.style.overflow = "auto";
   };
 
   // when user accepts
   const handleAccept = () => {
-    setCookie(cookieName, true, 365, '/');
-    setCookie('showCookie', false, 365, '/');
+    setCookie(cookieName, true, 365, "/");
+    setCookie("showCookie", false, 365, "/");
     setShowCookieConsent(false);
     setShowModal(false);
-    document.body.style.overflow = 'auto';
+    document.body.style.overflow = "auto";
   };
 
   const handleShowModalClick = () => {
     setShowModal(!showModal);
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflow = "hidden";
   };
 
   const closeModal = () => {
     setShowModal(false);
-    document.body.style.overflow = 'auto';
+    document.body.style.overflow = "auto";
   };
 
   useEffect(() => {
-    if (typeof window !== `undefined` && getCookie('showCookie') !== "false") {
+    if (typeof window !== `undefined` && getCookie("showCookie") !== "false") {
       setShowCookieConsent(true);
     }
   }, []);
 
-  const settingCookieText = useTranslate('cookie_setting_button', 'Cookie Setting');
+  const settingCookieText = useTranslate(
+    "cookie_setting_button",
+    "Cookie Setting"
+  );
 
   return (
     <>
-      <div className={`${styles.cookieConsent} ${(showCookieConsent && styles.show) || ''}`}>
-        <div className={`${styles?.consent || ''}`}>
-          <div className={styles?.content || ''}>{children}</div>
-          <div className={styles?.buttonsContainer || ''}>
+      <div
+        className={`${styles.cookieConsent} ${
+          (showCookieConsent && styles.show) || ""
+        }`}
+      >
+        <div className={`${styles?.consent || ""}`}>
+          <div className={styles?.content || ""}>{children}</div>
+          <div className={styles?.buttonsContainer || ""}>
             {settingsCookie && (
               <button
                 onClick={handleShowModalClick}
@@ -90,20 +98,22 @@ const CookieConsent = ({
               className="cookie-consent-gtm btn-cta"
               type="button"
             >
-              {useTranslate('cookie_accept_button', acceptText)}
+              {useTranslate("cookie_accept_button", acceptText)}
               {icon && icon}
             </button>
           </div>
         </div>
       </div>
       {settingsCookie && showModal && (
-        <CookieModal
-          logo={logo}
-          hide={!showModal}
-          handleAcceptCookies={handleAccept}
-          handleDeclineCookies={handleDecline}
-          closeModal={closeModal}
-        />
+        <Suspense fallback={null}>
+          <CookieModal
+            logo={logo}
+            hide={!showModal}
+            handleAcceptCookies={handleAccept}
+            handleDeclineCookies={handleDecline}
+            closeModal={closeModal}
+          />
+        </Suspense>
       )}
     </>
   );
@@ -116,7 +126,11 @@ CookieConsent.propTypes = {
   settingsCookie: PropTypes.bool,
   cookieName: PropTypes.string,
   logo: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.any,
+  ]),
   icon: PropTypes.node,
 };