gatsby-matrix-theme 40.0.19 → 40.0.21

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

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import loadable from '@loadable/component';
 import { getURLParam } from 'gatsby-core-theme/src/helpers/getters';
 import Module from 'gatsby-core-theme/src/components/molecules/module';
 
@@ -10,6 +9,8 @@ import keygen from 'gatsby-core-theme/src/helpers/keygen';
 import styles from 'gatsby-core-theme/src/components/molecules/main/main.module.scss';
 import settings from 'gatsby-core-theme/src/constants/settings.mjs';
 import FeedBackModule from '../../../../components/atoms/feedBackModule';
+import ReviewCredits from '../../../../components/atoms/review-credits';
+import Author from '~atoms/author';
 import { isSearchPath } from '~helpers/isSearchPath';
 
 const Main = ({
@@ -35,52 +36,55 @@ const Main = ({
     .length;
 
   const pathPrefixes = isSearchPath(allMarkets, page.path);
-  const SearchPage = pathPrefixes ? loadable(() => import(`~pages/search`)) : null;
+  const SearchPage = pathPrefixes ? lazy(() => import(`~pages/search`)) : null;
   const HtmlSitemap = pageContext.sitemapData
-    ? loadable(() => import(`gatsby-core-theme/src/components/atoms/sitemap`))
+    ? lazy(() => import(`gatsby-core-theme/src/components/atoms/sitemap`))
     : null;
 
   const Newsletter = showNewsletter
-    ? loadable(() => import('gatsby-core-theme/src/components/molecules/newsletter'))
+    ? lazy(() => import('gatsby-core-theme/src/components/molecules/newsletter'))
     : null;
   const NewsletterSuccess =
     showNewsletter && typeof window !== 'undefined' && Boolean(getURLParam('subscribed'))
-      ? loadable(() => import(`gatsby-core-theme/src/components/molecules/newsletter/success`))
+      ? lazy(() => import(`gatsby-core-theme/src/components/molecules/newsletter/success`))
       : null;
   const NotFound = page.path.includes('404')
-    ? loadable(() => import(`gatsby-core-theme/src/components/atoms/not-found`))
+    ? lazy(() => import(`gatsby-core-theme/src/components/atoms/not-found`))
     : null;
+
   const AuthorBox =
-    page.author_id && !isContactUsPage ? loadable(() => import(`~atoms/author-box`)) : null;
-  const ReviewCredits =
+    page.author && page.author_id && !isContactUsPage
+      ? lazy(() => import(`~atoms/author-box`))
+      : null;
+
+  const showReviewCredits =
     page.path !== '/' &&
     !isContactUsPage &&
     page.path !== 'news' &&
     page.path !== 'sitemap' &&
     page.template !== 'ppc' &&
     page.author_id &&
-    showAuthor
-      ? loadable(() => import('../../../../components/atoms/review-credits'))
-      : null;
-  const Author =
+    showAuthor;
+
+  const showAuthorComponent =
     page.path !== '/' &&
     !isContactUsPage &&
     page.path !== 'news' &&
     page.path !== 'sitemap' &&
     page.template !== 'ppc' &&
     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 Feedback =
     page?.sections?.main?.feedbackCounter &&
     !isContactUsPage &&
     !exclFeedback &&
-    loadable(() => import(`../../../../components/atoms/feedback`));
+    lazy(() => import(`../../../../components/atoms/feedback`));
 
   const date =
     page.manual_updated_date || page.manual_published_date
@@ -89,10 +93,19 @@ const Main = ({
 
   return (
     <main className={`${styles?.modulePage || ''} ${styles[page?.template] || ''}`}>
-      {NotFound && <NotFound pageContext={pageContext} />}
-      {HtmlSitemap && <HtmlSitemap pageContext={pageContext} />}
+      {NotFound && (
+        <Suspense fallback={<></>}>
+          <NotFound pageContext={pageContext} />
+        </Suspense>
+      )}
+      {HtmlSitemap && (
+        <Suspense fallback={<></>}>
+          <HtmlSitemap pageContext={pageContext} />
+        </Suspense>
+      )}
+
       {useReviewCredits
-        ? ReviewCredits && (
+        ? showReviewCredits && (
             <ReviewCredits
               date={date}
               author={page?.author_id && page?.author}
@@ -102,7 +115,7 @@ const Main = ({
               type={page?.template}
             />
           )
-        : Author && (
+        : showAuthorComponent && (
             <Author
               name={page.author?.name}
               date={date}
@@ -115,6 +128,7 @@ const Main = ({
               headerOffset={174}
             />
           )}
+
       {section.modules &&
         section.modules.map((module, index) => (
           <Module
@@ -128,28 +142,44 @@ const Main = ({
             modulePosition={index}
           />
         ))}
-      {SearchPage && <SearchPage page={page} />}
+      {SearchPage && (
+        <Suspense fallback={<></>}>
+          <SearchPage page={page} />
+        </Suspense>
+      )}
       {AuthorBox && (
-        <AuthorBox
-          author={page.author}
-          page={page}
-          date={date}
-          readingTime={page.reading_time}
-          reviewer={page.reviewer_id && page?.reviewer}
-        />
+        <Suspense fallback={<></>}>
+          <AuthorBox
+            author={page.author}
+            page={page}
+            date={date}
+            readingTime={page.reading_time}
+            reviewer={page.reviewer_id && page?.reviewer}
+          />
+        </Suspense>
       )}
       {Feedback && (
-        <Feedback
-          trueVotes={page?.true_votes}
-          falseVotes={page?.false_votes}
-          pageId={page?.id}
-          casinoTitle={page?.relation ? page?.relation.name : page?.title}
-          operatorImg={page?.relation?.standardised_logo_url || page?.relation?.logo_url}
-        />
+        <Suspense fallback={<></>}>
+          <Feedback
+            trueVotes={page?.true_votes}
+            falseVotes={page?.false_votes}
+            pageId={page?.id}
+            casinoTitle={page?.relation ? page?.relation.name : page?.title}
+            operatorImg={page?.relation?.standardised_logo_url || page?.relation?.logo_url}
+          />
+        </Suspense>
+      )}
+      {Newsletter && (
+        <Suspense fallback={<></>}>
+          <Newsletter page={page} />
+        </Suspense>
       )}
-      {Newsletter && <Newsletter page={page} />}
       {NewsletterSuccess && <NewsletterSuccess />}
-      {page.template !== 'ppc' && Feedback && <FeedBackModule />}
+      {page.template !== 'ppc' && Feedback && (
+        <Suspense fallback={<></>}>
+          <FeedBackModule />
+        </Suspense>
+      )}
     </main>
   );
 };

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

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/prop-types */
-import React, { useContext } from 'react';
+/* eslint-disable no-else-return */
+import React, { useContext, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
 import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import {
@@ -10,7 +10,12 @@ import {
   getSectionExtraField,
   translate,
 } from 'gatsby-core-theme/src/helpers/getters';
+import Content from 'gatsby-core-theme/src/components/molecules/content';
+import Toplist from 'gatsby-core-theme/src/components/organisms/toplist';
+import Anchor from 'gatsby-core-theme/src/components/organisms/anchor/template-one';
+import Cards from '../../../../components/organisms/cards';
 import ModuleTitle from '../../atoms/module-title';
+import InfoGrid from '../../../../components/atoms/info-grid/template-one';
 import { getApiQueryParams } from '../../../helpers/sportstake';
 import { removeSymbols } from '../../../../helpers/strings';
 import { generateCustomHeadings } from '../../../helpers/lotto';
@@ -34,39 +39,31 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
     }))(siteSchema);
 
   const GetModuleComponent = (moduleItem) => {
-    const { items, name, style } = moduleItem || {};
+    const { items, name } = moduleItem || {};
 
     switch (name) {
       // Modules
       case 'content':
-        return loadable(() => import('gatsby-core-theme/src/components/molecules/content'));
+        return Content;
       case 'top_list':
-        return loadable(() => import('gatsby-core-theme/src/components/organisms/toplist'));
+        return Toplist;
       case 'archive':
         if (!items || items.length === 0) return null;
-        return loadable(() => import('gatsby-core-theme/src/components/organisms/archive'));
+        return lazy(() => import('gatsby-core-theme/src/components/organisms/archive'));
       case 'counter':
-        return loadable(() => import('gatsby-core-theme/src/components/molecules/counter'));
+        return lazy(() => import('gatsby-core-theme/src/components/molecules/counter'));
       case 'contact_form':
-        return loadable(() => import('gatsby-core-theme/src/components/atoms/contact-form'));
+        return lazy(() => import('gatsby-core-theme/src/components/atoms/contact-form'));
       case 'cards':
-        return loadable(() => import('../../../../components/organisms/cards'));
       case 'cards_v2':
-        return loadable(() => import('../../../../components/organisms/cards'));
+        return Cards;
       case 'pros_and_cons':
-        return loadable(() => import('gatsby-core-theme/src/components/molecules/pros-cons'));
+        return lazy(() => import('gatsby-core-theme/src/components/molecules/pros-cons'));
       case 'accordion':
-        return loadable(() => import('gatsby-core-theme/src/components/organisms/accordion'));
+        return lazy(() => import('gatsby-core-theme/src/components/organisms/accordion'));
       case 'anchor':
         if (items && items.length > 0) {
-          if (style === 'template_two') {
-            return loadable(() =>
-              import('gatsby-core-theme/src/components/organisms/anchor/template-two')
-            );
-          }
-          return loadable(() =>
-            import('gatsby-core-theme/src/components/organisms/anchor/template-one')
-          );
+          return Anchor;
         }
         return null;
       case 'carousel':
@@ -74,69 +71,77 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
           items.length > 0 && // has items
           items.filter((item) => item.image === null).length === 0 // not filled with null items
         ) {
-          return loadable(() => import('gatsby-core-theme/src/components/organisms/carousel'));
+          return lazy(() => import('gatsby-core-theme/src/components/organisms/carousel'));
         }
         return null;
       case 'bonus':
-        return loadable(() =>
-          import('gatsby-core-theme/src/components/molecules/bonus/template-one')
-        );
+        return lazy(() => import('gatsby-core-theme/src/components/molecules/bonus/template-one'));
       case 'image':
-        return loadable(() => import('gatsby-core-theme/src/components/atoms/image'));
+        return lazy(() => import('gatsby-core-theme/src/components/atoms/image'));
       case 'spotlights':
-        if (process.env.ENABLE_SPOTLIGHT_V2) {
-          return loadable(() => import('~molecules/spotlights_v2'));
+        if (module?.mode === 'image_text') {
+          if (module?.style === 'template_two') {
+            return lazy(() => import('~molecules/spotlights_v2/image-text/template-two'));
+          } else if (module?.style === 'template_three') {
+            return lazy(() => import('~molecules/spotlights_v2/image-text/template-three'));
+          }
+          return lazy(() => import('~molecules/spotlights_v2/image-text/template-one'));
+        } else if (module?.mode === 'icon') {
+          return lazy(() => import('~molecules/spotlights_v2/icon/template-one'));
+        } else if (module?.mode === 'image') {
+          if (module?.style === 'template_two') {
+            return lazy(() => import('~molecules/spotlights_v2/image/template-two'));
+          }
+          return lazy(() => import('~molecules/spotlights_v2/image/template-one'));
         }
-        return loadable(() => import('~atoms/spotlights'));
-
+        return null;
       case 'faq':
         // eslint-disable-next-line react/destructuring-assignment
         if (moduleItem?.display_front_end === '1') {
-          return loadable(() => import('../../../../components/molecules/faq'));
+          return lazy(() => import('../../../../components/molecules/faq'));
         }
         return null;
       // Template blocks
       case 'horse_racing_calculator':
-        return loadable(() => import('../../../../components/molecules/horse-calculator'));
+        return lazy(() => import('../../../../components/molecules/horse-calculator'));
       case 'review_summary':
-        return loadable(() => import('../../../../components/molecules/operator-summary'));
+        return lazy(() => import('../../../../components/molecules/operator-summary'));
       case 'game_iframe':
       case 'iframe':
         if (moduleItem?.value_type === 'template_block') {
-          return loadable(() => import('../../../../components/molecules/game-iframe'));
+          return lazy(() => import('../../../../components/molecules/game-iframe'));
         }
-        return loadable(() => import('gatsby-core-theme/src/components/atoms/iframe'));
-      // Template blocks
+        return lazy(() => import('gatsby-core-theme/src/components/atoms/iframe'));
       case 'info_grid':
       case 'information_grid':
       case 'operator_information_block':
         if (getSectionExtraField(null, page, 'operator_is_placeholder') === '1') {
           return null;
         }
-        return loadable(() => import('../../../../components/atoms/info-grid/template-one'));
+        return InfoGrid;
       case 'content_box':
-        return loadable(() => import('gatsby-core-theme/src/components/atoms/content-box'));
+        return lazy(() => import('gatsby-core-theme/src/components/atoms/content-box'));
       case 'timeline':
-        return loadable(() =>
+        return lazy(() =>
           import('gatsby-core-theme/src/components/molecules/content-and-custom-module')
         );
       case 'welcome_bonus':
-        return loadable(() => import('../../../../components/molecules/operator-welcome-bonus'));
+        return lazy(() => import('../../../../components/molecules/operator-welcome-bonus'));
       case 'widget':
-        return loadable(() => import('../../../../components/molecules/widget'));
+        return lazy(() => import('../../../../components/molecules/widget'));
       case 'score_gauges':
-        return loadable(() => import('../../../../components/molecules/game-score-gauge'));
+        return lazy(() => import('../../../../components/molecules/game-score-gauge'));
       case 'site_contacts':
         if (page?.siteSchema?.email === null) {
           return null;
         }
-        return loadable(() => import('../../../../components/atoms/site-contacts'));
+        return lazy(() => import('../../../../components/atoms/site-contacts'));
       case 'newsletter_optin':
-        return loadable(() => import('../../../../components/molecules/newsletter-optin'));
+        return lazy(() => import('../../../../components/molecules/newsletter-optin'));
       case 'wagering_calculator':
-        return loadable(() => import('../../../../components/molecules/wagering-calculator'));
+        return lazy(() => import('../../../../components/molecules/wagering-calculator'));
       case 'social_icons':
-        return loadable(() => import('../../../../components/atoms/social-icons'));
+        return lazy(() => import('../../../../components/atoms/social-icons'));
       case 'sportstake4fixturesmidweek':
       case 'sportstake8fixturesmidweek':
       case 'sportstake8fixturesweekend':
@@ -145,7 +150,7 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
       case 'sportstakecricketfixturesweekend':
       case 'sportstakerugbyfixturesweekend':
         if (!serverData?.fixtures?.data?.find((x) => x?.name === module?.name)) return;
-        return loadable(() => import('../../../../components/molecules/sportstake/fixtures'));
+        return lazy(() => import('../../../../components/molecules/sportstake/fixtures'));
       case 'sportstake4resultsmidweek':
       case 'sportstake8resultsmidweek':
       case 'sportstake8resultsweekend':
@@ -154,14 +159,14 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
       case 'sportstakecricketresultsweekend':
       case 'sportstakerugbyresultsweekend':
         if (!serverData?.results?.data?.find((x) => x?.name === module?.name)) return;
-        return loadable(() => import('../../../../components/molecules/sportstake/results'));
+        return lazy(() => import('../../../../components/molecules/sportstake/results'));
       case 'lotto':
       case 'daily_lotto':
       case 'powerball':
         if (!serverData?.lotto?.data?.find((x) => x?.name === module?.name)) return;
-        return loadable(() => import('../../../../components/molecules/sportstake/lotto-module'));
+        return lazy(() => import('../../../../components/molecules/sportstake/lotto-module'));
       case 'newsletter':
-        return loadable(() => import('gatsby-core-theme/src/components/molecules/newsletter'));
+        return lazy(() => import('gatsby-core-theme/src/components/molecules/newsletter'));
       default:
         return null;
     }
@@ -261,11 +266,37 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
     '--module-background-color': module.background_color,
   };
 
-  const ModuleIntro =
+  const showModuleIntro =
     module.name !== 'top_list' &&
     module.module_introduction &&
-    module.module_introduction !== '<p></p>' &&
-    loadable(() => import('~molecules/content'));
+    module.module_introduction !== '<p></p>';
+
+  const useSuspense = [
+    'cards_v2',
+    'content',
+    'top_list',
+    'anchor',
+    'info_grid',
+    'information_grid',
+    'operator_information_block',
+  ];
+
+  const isSportsStake = [
+    'sportstake4resultsmidweek',
+    'sportstake8resultsmidweek',
+    'sportstake8resultsweekend',
+    'sportstake13resultsmidweek',
+    'sportstake13resultsweekend',
+    'sportstakecricketresultsweekend',
+    'sportstakerugbyresultsweekend',
+    'sportstake4fixturesmidweek',
+    'sportstake8fixturesmidweek',
+    'sportstake8fixturesweekend',
+    'sportstake13fixturesmidweek',
+    'sportstake13fixturesweekend',
+    'sportstakecricketfixturesweekend',
+    'sportstakerugbyfixturesweekend',
+  ];
 
   return (
     ModuleComponent && (
@@ -278,7 +309,7 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
         style={module.background_color && moduleBackgroundColor}
         className={`${styles[moduleClassName] !== undefined ? styles[moduleClassName] || '' : ''} ${
           module?.name || ''
-        } ${ModuleIntro ? '' : styles.noModuleIntro} ${styles?.module || ''} ${
+        } ${showModuleIntro ? '' : styles.noModuleIntro} ${styles?.module || ''} ${
           module?.style ? styles[module.style] || '' : ''
         } module ${homepageFirstModule ? styles?.isHomepageFirstModule || '' : ''}`}
       >
@@ -291,8 +322,8 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
                 anchorLabel={module.name === 'archive' && anchorLabel}
               />
             )}
-            {ModuleIntro && (
-              <ModuleIntro
+            {showModuleIntro && (
+              <Content
                 isModuleIntroduction={module.module_introduction}
                 module={{ value: module.module_introduction }}
                 isHomepageFirstModule={homepageFirstModule}
@@ -300,16 +331,37 @@ const Modules = ({ module, pageContext, index, exclOperator, serverData }) => {
             )}
           </>
         )}
-
-        <ModuleComponent
-          module={module}
-          page={page}
-          pageContext={pageContext}
-          noModuleIntro={!ModuleIntro}
-          {...extraProps()}
-          exclOperator={exclOperator}
-          isHomepageFirstModule={homepageFirstModule}
-        />
+        {useSuspense.includes(module.name) ? (
+          <ModuleComponent
+            module={module}
+            page={page}
+            pageContext={pageContext}
+            noModuleIntro={!showModuleIntro}
+            {...extraProps()}
+            exclOperator={exclOperator}
+            isHomepageFirstModule={homepageFirstModule}
+          />
+        ) : (
+          <Suspense
+            fallback={
+              <div
+                className={`${
+                  isSportsStake.includes(module.name) ? styles.sportstake : styles[module.name]
+                }`}
+              />
+            }
+          >
+            <ModuleComponent
+              module={module}
+              page={page}
+              pageContext={pageContext}
+              noModuleIntro={!showModuleIntro}
+              {...extraProps()}
+              exclOperator={exclOperator}
+              isHomepageFirstModule={homepageFirstModule}
+            />
+          </Suspense>
+        )}
       </div>
     )
   );

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

@@ -149,3 +149,12 @@
     margin-top: .2rem;
   }
 }
+
+
+.lotto, .daily_lotto, .powerball {
+  min-height: 103.5rem;
+}
+
+.sportstake {
+  min-height: 42rem;
+}

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

@@ -3,9 +3,11 @@ import React, { useState, useEffect, useRef, useCallback, useContext } from 'rea
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 import { FaSearch } from '@react-icons/all-files/fa/FaSearch';
-import loadable from '@loadable/component';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import Tabs from 'gatsby-core-theme/src/hooks/tabs';
+import CustomSelect from '~atoms/custom-select';
+import Archive from '~organisms/archive';
 import loadingImg from '../../../../images/loading.svg';
 import LazyImage from '~hooks/lazy-image';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
@@ -236,7 +238,6 @@ const Search = ({
     }
   }, [pageSearchOptionsCopy]);
   if (pageSearchOptionsCopy !== null && pageSearchOptionsCopy.sort !== undefined) {
-    const CustomSelect = loadable(() => import('~atoms/custom-select'));
     pageSearchOptionsCopy.tabsOptions.HeaderComp = (
       <div className={styles.selectwrapper}>
         <CustomSelect
@@ -276,10 +277,6 @@ const Search = ({
     );
   }
 
-  const Tabs =
-    searchResultsRef.current.length !== 0 &&
-    loadable(() => import('gatsby-core-theme/src/hooks/tabs'));
-
   return (
     <>
       {formSearchOptionsCopy !== null && (
@@ -403,8 +400,6 @@ const Search = ({
 
                 if (items.length === 0) return null;
 
-                const Archive = loadable(() => import('~organisms/archive'));
-
                 return (
                   <div
                     results={items?.items?.length}

package/src/gatsby-core-theme/components/organisms/cookie-consent/cookie-consent.module.scss

@@ -16,6 +16,7 @@
   @include min(tablet) {
     padding: var(--cookie-consent-desktop-padding, 1.6rem 2.4rem 2.4rem);
   }
+  display: none;
 
   > div {
     @include flex-align(flex-start, space-between);
@@ -141,3 +142,7 @@
     }
   }
 }
+
+.show {
+  display: block;
+}

package/src/gatsby-core-theme/components/organisms/toplist/index.js

@@ -2,10 +2,12 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Title from 'gatsby-matrix-theme/src/gatsby-core-theme/hooks/tabs/title';
 import keygen from '~helpers/keygen';
 import List from './list';
 import styles from './toplist.module.scss';
+import Tabs from '~hooks/tabs';
+import ModuleIntroduction from '~molecules/content';
 import AffiliateDisclaimer from '../../../../components/atoms/affiliate-disclaimer';
 
 const TopList = ({
@@ -40,13 +42,8 @@ const TopList = ({
     </div>
   ));
 
-  const Tabs = showTabs && loadable(() => import('~hooks/tabs'));
-  const Title =
-    !showTabs &&
-    (module.title || module.module_title) &&
-    loadable(() => import('gatsby-matrix-theme/src/gatsby-core-theme/hooks/tabs/title'));
-  const ModuleIntro =
-    !showTabs && module.module_introduction && loadable(() => import('~molecules/content'));
+  const showTitle = !showTabs && (module.title || module.module_title);
+  const showModuleIntro = !showTabs && module.module_introduction;
 
   return showTabs ? (
     <Tabs
@@ -63,7 +60,7 @@ const TopList = ({
     </Tabs>
   ) : (
     <>
-      {Title && (
+      {showTitle && (
         <div className={`${styles?.tabsHeader || ''} ${styles?.titleAndTab || ''}`}>
           <Title
             module={module}
@@ -73,8 +70,8 @@ const TopList = ({
           {showAffiliateDisclaimer && <AffiliateDisclaimer className={styles.disclaimer} />}
         </div>
       )}
-      {ModuleIntro && (
-        <ModuleIntro
+      {showModuleIntro && (
+        <ModuleIntroduction
           module={{ value: module.module_introduction }}
           isHomepageFirstModule={isHomepageFirstModule}
         />