gatsby-core-theme 1.6.21 → 2.0.2

package/CHANGELOG.md

@@ -1,3 +1,88 @@
+## [2.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.1...v2.0.2) (2021-12-17)
+
+
+### Bug Fixes
+
+* added lazyload for starrating ([34a3bce](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/34a3bce70bde1e9364f4c5aba14845d19d39664e))
+* content iframe lazy ([413f83d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/413f83d70eb05aa514f003e450afce04366537d5))
+* tests ([c56a1c0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c56a1c0168247d25f8445f6b9ed8102c6bae8c08))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([4c1f4f3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4c1f4f3c5f366cd57245ca2ef9bb5ec603d13e97))
+
+## [2.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.0...v2.0.1) (2021-12-16)
+
+
+### Bug Fixes
+
+* link list bug ([893b8c1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/893b8c12737a4007c94364ace744e7c1d7459706))
+
+# [2.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.22...v2.0.0) (2021-12-16)
+
+
+### Bug Fixes
+
+* add function to transform event datetime ([7167a6b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7167a6b52e0a19064f2a906fe30a4cccfeca41e4))
+* added full date format in currentdate placeholder ([275d9d3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/275d9d3b9b2394acfe8074e50ada241c86aee133))
+* added lazyload if native lazy is not supported ([d27115c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d27115cca38920a11fdca342d3eb631490ee0108))
+* added translation in toplist default row ([c4c100e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c4c100eb9e1b5ce67e72bb42551cbb37311969f7))
+* content fix ([73a6eac](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/73a6eac2cbc4c1bb428312b95867e844c2c2abcd))
+* content module removed parser and used replace function ([cc2973f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cc2973f42e6db2fcd999879e97af502092d65324))
+* lazyimage component ([5230b91](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5230b91bbde26015ebaf49621d8c47207b20d3c6))
+* removed direct mutating, and wip on replacing all events with updated timezone ([1571eb8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1571eb86149eedc74c9a69c77102ceb10d16c9aa))
+* removed function that changes root scss variables ([0b60602](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0b60602002774f3c9d3b2895f87574e3c6c75d44))
+* removed unused lazyloads ([9cc1c5c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9cc1c5c4a89d3e67fe65d85c2e57dd6854dd76a4))
+* replace star svg with css ([868e3a2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/868e3a20ce2804c3deab67d62f64348e657bdbf1))
+* return main component as it was ([db3aca5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/db3aca55c82839d0d281b77b7225a6f75d35c1d7))
+* selling points icon color moved to css var ([7283fc1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7283fc1ef56a7fae24acca91f65a72c0752cd635))
+* selling points tick ([71b3aaf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/71b3aaf4105c6584ede11791cac14a04f8fe9338))
+* small fix ([f6444c1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f6444c1f7421dd9063e9029d02eb8441ec10ffc3))
+* small issue ([43be83b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/43be83bdd5fa5b3d5fe13160a78432a9963c33ec))
+* small issue ([1d49e35](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1d49e357d2098c557d0f7b16e6ab9d7033f16674))
+* test fixed issue ([320e030](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/320e030e49a8c6d7e461578d01e72c2948bdec5a))
+* tests and lazy iframe ([c0b63d5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c0b63d5445f85f7e6b5539b628f516ecbc86547d))
+* tests and lazy iframe ([364f449](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/364f449965ee3998b2dbbdb5132c6a91951ff000))
+* toplist row images ([3ffeb17](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3ffeb17696e2d82fe8b9841defe2b6e78be1e68b))
+
+
+### Code Refactoring
+
+* add error handling for invalid date ([caa308b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/caa308b9b50352228d86d031c449918c7d81840a))
+* remove unneeded function ([d2fb77a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d2fb77a3810e5b767b716d87db4fb63853995d46))
+* tabs set to loadable ([9079a60](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9079a60aaead65be9d70629fdd1025ce46ed8db8))
+* translations change on operator cta ([0a476cf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0a476cf2f1ab02eeba06db8af9eaf692b9715b75))
+* translations change on operator cta ([ee9fded](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ee9fded3227ab34287d539676bc581bcb1a5abee))
+* update placeholders generation for meta tags ([0a4e14b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0a4e14bf2f594a7c28b5698df06436df43bd378c))
+
+
+### Config
+
+* merged master ([08e4355](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/08e43557f6f3827f612fed9448d0db5a5d65577a))
+
+
+* Merge branch 'add_timezone_prefix' into 'master' ([b5d22b5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b5d22b57eb52d8ed97e2928706c98d437a08738b))
+* Merge branch 'tm-2617-update-placeholders-for-meta-tags' into 'master' ([9c5bf49](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9c5bf492688ddb28d01182a5f46ce18d8f7342d6))
+* Merge branch 'cta-play-now' into 'master' ([29107c4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/29107c4da0339cb798b4c6b5c9dfe98c69bab015))
+* Merge branch 'master' into cta-play-now ([f6aa117](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f6aa11733e67c700aa44fd8dec7b918c8d3db661))
+* Merge branch 'selling-points' into 'master' ([4dc0e96](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4dc0e96e48f5219bbeede529fd346e16ede5b514))
+* Merge branch 'star-rating' into 'master' ([ecc5e24](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ecc5e24f9e9f45e72c1ee50dd552fb1a68d04f44))
+* Update .env.development ([a91cd2f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a91cd2fc6355e31644d22749cb98ec1e2c81160a))
+
+## [1.6.22](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.21...v1.6.22) (2021-12-10)
+
+
+### Bug Fixes
+
+* tests ([c8f7780](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c8f7780b257ef1994244217d9d20c2c934a43859))
+
+
+### Code Refactoring
+
+* using loadable for components set to visible against a condition ([16e23e0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/16e23e06b835f7b41a303f1ff317d3dc19dd1d9c))
+
+
+* Merge branch 'performance-improvements' into 'master' ([a853c75](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a853c75bcdafe099f4b8b4e13485477503c0fc85))
+
 ## [1.6.21](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.20...v1.6.21) (2021-12-07)
 
 

package/gatsby-node.esm.js

@@ -5,7 +5,7 @@
 import { cloneDeep, chunk, pick } from 'lodash';
 import chalk from 'chalk';
 import { getData, getLocalData } from './src/helpers/api';
-import { generateMetaTitle, generateTrackerLink } from './src/helpers/generators';
+import { generateMetaString, generateTrackerLink } from './src/helpers/generators';
 import processor, { processSitemapPages } from './src/helpers/processor';
 import { pickAuthorsPageKeys } from './src/constants/pick-keys';
 
@@ -211,8 +211,19 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
         page.authors = Object.keys(authors || {}).map((key) =>
           pick(authors[key], pickAuthorsPageKeys)
         );
-        // Done for matrix-theme sites for [MONTH][YEAR] auto update
-        page.meta_title = page.meta_title && generateMetaTitle(page.meta_title, translations);
+        // Done for matrix-theme sites for placeholders auto update
+        page.meta_title =
+          page.meta_title &&
+          generateMetaString(page.meta_title, translations, {
+            siteName: response.general.site_name,
+            siteTitle: page.title,
+          });
+        page.meta_description =
+          page.meta_description &&
+          generateMetaString(page.meta_description, translations, {
+            siteName: response.general.site_name,
+            siteTitle: page.title,
+          });
 
         const contextData = {
           page,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "1.6.21",
+  "version": "2.0.2",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",
@@ -85,7 +85,7 @@
     "babel-preset-gatsby": "^1.3.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-react": "^7.22.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.24",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.26",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "react-test-renderer": "^17.0.1",

package/src/components/app.js

@@ -66,6 +66,10 @@ const App = ({ pageContext }) => {
 
   const TrackerContent = isTracker ? loadable(() => import(`~pages/tracker`)) : null;
 
+  if (pageContext.siteInfo?.site_name === 'playcasino.co.za') {
+    translations.play_now = 'Play now';
+  }
+
   return isTracker ? (
     <>
       <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
-
+import loadable from '@loadable/component';
+import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
 import styles from './iframe.module.scss';
 
 const Iframe = ({
@@ -10,9 +10,10 @@ const Iframe = ({
   minHeight = '45rem',
   lazyLoad = true,
   frameBorder = 1,
-}) => (
-  <div className={styles.iframeContainer}>
-    {lazyLoad ? (
+}) => {
+  if (!isNativeImageLazyLoadingSupported() && lazyLoad) {
+    const LazyLoad = loadable(() => import(`react-lazyload`));
+    return (
       <LazyLoad>
         <iframe
           title={title}
@@ -21,16 +22,21 @@ const Iframe = ({
           frameBorder={frameBorder}
         />
       </LazyLoad>
-    ) : (
+    );
+  }
+
+  return (
+    <div className={styles.iframeContainer}>
       <iframe
         title={title}
         style={{ width: '100%', minHeight, display: 'block' }}
         src={src}
+        loading={lazyLoad ? 'lazy' : 'eager'}
         frameBorder={frameBorder}
       />
-    )}
-  </div>
-);
+    </div>
+  );
+};
 
 Iframe.propTypes = {
   src: PropTypes.string.isRequired,

package/src/components/atoms/selling-points/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
 
 import keygen from '~helpers/keygen';
 import styles from './selling-points.module.scss';
@@ -13,7 +12,7 @@ const SellingPoints = ({ sellingPoints, icon, limit = 3 }) => {
     <ul className={styles.sellingPoint}>
       {sellingPoints.slice(0, limit).map((item) => (
         <li key={keygen()}>
-          {icon && <LazyLoad once>{icon}</LazyLoad>}
+          <span className={`${icon && styles.tick}`}>{` `}</span>
           <span>{item}</span>
         </li>
       ))}

package/src/components/atoms/selling-points/selling-points.module.scss

@@ -7,11 +7,18 @@
     font-size: 1.4rem;
     width: 100%;
 
-    svg {
-      margin-right: 1rem;
-      font-weight: 700;
-      color: var(--color-22);
-      flex: 0 0 1.4rem;
+    .tick {
+      position: relative;
+      margin-left: 2rem;
+      &::before {
+        @include arrow(var(--selling-point-icon-color), 1.5rem, down, false);
+        position: absolute;        
+        padding: 0px 0px .8rem .32rem;
+        border-right-width: .18rem;
+        border-bottom-width: .18rem;
+        bottom: -.3rem;
+        left: -1.8rem;
+      }
     }
   }
 

package/src/components/atoms/selling-points/selling-points.test.js

@@ -24,7 +24,7 @@ describe('Selling Points Component', () => {
     const { container } = render(
       <SellingPoints sellingPoints={sellingPointsList} icon={<p>test icon</p>} />
     );
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(3);
+    expect(container.querySelectorAll('.tick')).toHaveLength(3);
   });
 
   test('test empty selling point list', () => {

package/src/components/molecules/content/index.js

@@ -1,13 +1,21 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/no-danger */
 import React from 'react';
-import parse from 'html-react-parser';
 import PropTypes from 'prop-types';
+import parse from 'html-react-parser';
 
+import loadable from '@loadable/component';
 import LazyImage from '~hooks/lazy-image';
 import { parseCss } from '~helpers/css-parser';
 import styles from './content.module.scss';
 
 const Content = ({ module, pageContext = null }) => {
   const replaceMedia = (node) => {
+    if (node.name === 'iframe') {
+      const Iframe = loadable(() => import('gatsby-core-theme/src/components/atoms/iframe'));
+      return <Iframe src={node.attribs.src} />;
+    }
+
     if (node.name === 'img') {
       let stylesClass = null;
       const classes = node.attribs.class;
@@ -49,6 +57,7 @@ const Content = ({ module, pageContext = null }) => {
 };
 
 Content.propTypes = {
+  pageContext: PropTypes.object,
   module: PropTypes.shape({
     anchor_label: PropTypes.string,
     name: PropTypes.string,

package/src/components/molecules/footer/footer.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import getFooterSection from '~tests/factories/sections/footer.factory';
@@ -8,7 +8,7 @@ import Footer from '.';
 const footerSection = getFooterSection();
 
 describe('Footer Component', () => {
-  test('render footer menu items', () => {
+  test('render footer menu items', async () => {
     const { getByText } = render(
       <Footer
         footerMenu="footer_links"
@@ -16,27 +16,26 @@ describe('Footer Component', () => {
         section={footerSection.sections.footer}
       />
     );
-    expect(getByText('test1sub1')).toBeTruthy();
-    expect(getByText('test1sub1').closest('a').getAttribute('href')).toEqual('/test1sub1link');
-    expect(getByText('test1sub2')).toBeTruthy();
-    expect(getByText('test1sub2').closest('a').getAttribute('href')).toEqual('/test1sub2link');
-    expect(getByText('test1sub2').closest('ul').children.length).toBe(3);
 
-    expect(getByText('test2sub1')).toBeTruthy();
-    expect(getByText('test2sub1').closest('a').getAttribute('href')).toEqual('/test2sub1link');
-    expect(getByText('test2sub2')).toBeTruthy();
-    expect(getByText('test2sub2').closest('a').getAttribute('href')).toEqual('/test2sub2link');
-    expect(getByText('test2sub2').closest('ul').children.length).toBe(3);
+    await waitFor(() => {
+      expect(getByText('test1sub1')).toBeTruthy();
+      expect(getByText('test1sub1').closest('a').getAttribute('href')).toEqual('/test1sub1link');
+      expect(getByText('test1sub2')).toBeTruthy();
+      expect(getByText('test1sub2').closest('a').getAttribute('href')).toEqual('/test1sub2link');
+      expect(getByText('test1sub2').closest('ul').children.length).toBe(3);
+
+      expect(getByText('test2sub1')).toBeTruthy();
+      expect(getByText('test2sub1').closest('a').getAttribute('href')).toEqual('/test2sub1link');
+      expect(getByText('test2sub2')).toBeTruthy();
+      expect(getByText('test2sub2').closest('a').getAttribute('href')).toEqual('/test2sub2link');
+      expect(getByText('test2sub2').closest('ul').children.length).toBe(3);
+    });
   });
 
   test('render footer extra component', () => {
-    const FooterTop = () => {
-      return <>Test Extra component</>;
-    };
+    const FooterTop = () => <>Test Extra component</>;
 
-    const FooterBottom= () => {
-      return <>Test Extra component2</>;
-    };
+    const FooterBottom = () => <>Test Extra component2</>;
 
     const { getByText } = render(
       <Footer
@@ -51,7 +50,7 @@ describe('Footer Component', () => {
     expect(getByText('Test Extra component2')).toBeTruthy();
   });
 
-  test('render logo list', () => {
+  test('render logo list', async () => {
     const { getByTitle } = render(
       <Footer
         footerMenu="footer_links"
@@ -59,9 +58,10 @@ describe('Footer Component', () => {
         section={footerSection.sections.footer}
       />
     );
-  
-    expect(getByTitle('logo1')).toBeTruthy();
-    expect(getByTitle('logo2')).toBeTruthy();
+    await waitFor(() => {
+      expect(getByTitle('logo1')).toBeTruthy();
+      expect(getByTitle('logo2')).toBeTruthy();
+    });
   });
 });
 afterEach(() => {

package/src/components/molecules/footer/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LinkList from '~molecules/link-list';
+import loadable from '@loadable/component';
 import { getExtraField, copyrightText } from '~helpers/getters';
 import styles from './footer.module.scss';
 
@@ -19,6 +19,8 @@ const Footer = ({
   const BottomSection = footerBottomCustom;
   const showLinks = template !== 'ppc';
 
+  const LinkList = footerMenu && showLinks ? loadable(() => import('~molecules/link-list')) : null;
+
   return (
     <footer className={styles.footer}>
       <div className={styles.topPart}>

package/src/components/molecules/header/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import loadable from '@loadable/component';
 import styles from './header.module.scss';
 import Breadcrumbs from '~atoms/breadcrumbs';
-import Author from '~atoms/author';
 import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
 
 // eslint-disable-next-line import/no-named-as-default
@@ -41,6 +41,11 @@ function Header({ section, content = null, backgroundImage = true }) {
     return <div dangerouslySetInnerHTML={innerBannerHTML()} />;
   };
 
+  const Author =
+    section.page.path !== '/' && section.page.path !== 'contact-us' && section.page.author
+      ? loadable(() => import('~atoms/author'))
+      : null;
+
   return (
     <header className={styles.header}>
       {backgroundImage && backgroundImg}
@@ -51,7 +56,7 @@ function Header({ section, content = null, backgroundImage = true }) {
       >
         <div className={styles.topSection}>
           {section.page.path && <Breadcrumbs page={section.page} />}
-          {section.page.path !== '/' && section.page.path !== 'contact-us' && section.page.author && (
+          {Author && (
             <div className={styles.authorContainer}>
               <Author
                 authorProfile={section.page.author?.profile_page_path}

package/src/components/molecules/link-list/index.js

@@ -26,18 +26,15 @@ const LinkList = ({
   function renderLinkContent(item, index) {
     const icon = listIcon[index];
 
-    const LinkImage = () => {
-      return disableLazyLoad ? (
-        <img src={imagePrettyUrl(item.image)} width={width} height={height} alt={item.title} />
-      ) : (
-        <LazyImage
-          src={imagePrettyUrl(item.image)}
-          alt={item.title}
-          width={width}
-          height={height}
-        />
-      );
-    };
+    const LinkImage = () => (
+      <LazyImage
+        src={imagePrettyUrl(item.image)}
+        alt={item.title}
+        width={width}
+        height={height}
+        loading={disableLazyLoad ? 'eager' : 'lazy'}
+      />
+    );
 
     return (
       <>

package/src/components/molecules/operator-banner/operator-banner.test.js

@@ -12,7 +12,6 @@ describe('OperatorBanner Component', () => {
     );
     expect(container).toBeTruthy();
     expect(container.querySelectorAll('.sticky')).toHaveLength(1);
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
     expect(getByText('Rizk Casino')).toBeTruthy();
     expect(getByText('Visit')).toBeTruthy();
   });

package/src/components/molecules/search/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback, useContext } from 'rea
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 import { FaSearch } from 'react-icons/fa';
-
+import loadable from '@loadable/component';
 import LazyImage from '~hooks/lazy-image';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
 import styles from './search.module.scss';
@@ -12,9 +12,7 @@ import keygen from '~helpers/keygen';
 import { filterByKey, sortDateOn, sortIntOn, sortStringOn } from '~helpers/search';
 import loadSource from '~helpers/search-source';
 import { leftTrim } from '~helpers/strings';
-import Archive from '~organisms/archive';
 import ModuleTitle from '~atoms/module-title';
-import CustomSelect from '~atoms/custom-select';
 import { NavigationContext } from '~organisms/navigation/navigationContext';
 
 /* eslint-disable no-underscore-dangle */
@@ -213,6 +211,8 @@ const Search = ({
     }
   }, [pageSearchOptionsCopy]);
   if (pageSearchOptionsCopy !== null && pageSearchOptionsCopy.sort !== undefined) {
+    const CustomSelect = loadable(() => import('~atoms/custom-select'));
+
     pageSearchOptionsCopy.tabsOptions.HeaderComp = (
       <div className={styles.selectwrapper}>
         <CustomSelect
@@ -343,6 +343,8 @@ const Search = ({
 
                 if (items.length === 0) return null;
 
+                const Archive = loadable(() => import('~organisms/archive'));
+
                 return (
                   <div label={titleObj.title} tabId={type + index} key={keygen()}>
                     {pageSearchOptionsCopy.useArchive === undefined ||

package/src/components/molecules/slider/index.js

@@ -2,6 +2,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes, { element } from 'prop-types';
+import loadable from '@loadable/component';
 
 import {
   updateSlider,
@@ -14,7 +15,6 @@ import {
 
 import styles from './slider.module.scss';
 import Arrow from '~atoms/carousel/arrow';
-import Pagination from '~atoms/carousel/pagination-item';
 
 function Slider({
   gtmClass = '',
@@ -179,6 +179,10 @@ function Slider({
     };
   });
 
+  const Pagination = usePagination
+    ? loadable(() => import('~atoms/carousel/pagination-item'))
+    : null;
+
   return (
     state.length > 0 && (
       <div className={`${className} ${styles.slider}`} ref={sliderContainerRef}>
@@ -221,7 +225,7 @@ function Slider({
             </div>
           ))}
         </div>
-        {usePagination && (
+        {Pagination && (
           <Pagination
             type="dots"
             paginationHandler={paginationHandler}

package/src/components/molecules/slider/slider.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup, fireEvent, act } from '@testing-library/react';
+import { render, cleanup, fireEvent, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import keygen from '~helpers/keygen';
 import Slider from '.';
@@ -12,9 +12,9 @@ describe('Slider Component', () => {
     act(() => {
       const { container } = render(
         <Slider useArrows={false} usePagination={false} settings={{ numberOfSlides: 0 }}>
-          {list.map((element) => {
-            return <div key={keygen()}>{element}</div>;
-          })}
+          {list.map((element) => (
+            <div key={keygen()}>{element}</div>
+          ))}
         </Slider>
       );
 
@@ -30,9 +30,9 @@ describe('Slider Component', () => {
     const list = ['Summer', 'Autumn', 'Winter', 'Spring'];
     const { container } = render(
       <Slider useArrows={false} usePagination={false} settings={{ numberOfSlides: 0 }}>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
@@ -51,20 +51,24 @@ describe('Slider Component', () => {
     const list = ['Summer', 'Autumn', 'Winter', 'Spring'];
     const { container } = render(
       <Slider>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
     const prev = container.querySelector('button.left');
     const next = container.querySelector('button.right');
-    const dots = container.querySelector('div.pagination');
+
+    await waitFor(() => {
+      const dots = container.querySelector('div.pagination');
+      expect(dots).toBeTruthy();
+    });
+
     const content = container.querySelector('div.sliderContent');
 
     expect(prev).toBeTruthy();
     expect(next).toBeTruthy();
-    expect(dots).toBeTruthy();
     expect(content).toBeTruthy();
     expect(content.querySelector('.active>div').innerHTML).toBe('Summer');
   });
@@ -74,15 +78,15 @@ describe('Slider Component', () => {
 
     const { container } = render(
       <Slider>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
     const prev = container.querySelector('button.left');
     const next = container.querySelector('button.right');
-    const dots = container.querySelector('div.pagination');
+
     const content = container.querySelector('div.sliderContent');
 
     fireEvent.click(next);
@@ -91,10 +95,13 @@ describe('Slider Component', () => {
     fireEvent.click(prev);
     expect(content.querySelector('.active>div').innerHTML).toBe('Summer');
 
-    const dot = dots.querySelectorAll('button');
-    expect(dot.length).toEqual(4);
-    fireEvent.click(dot[1]);
-    expect(content.querySelector('.active>div').innerHTML).toBe('Autumn');
+    await waitFor(() => {
+      const dots = container.querySelector('div.pagination');
+      const dot = dots.querySelectorAll('button');
+      expect(dot.length).toEqual(4);
+      fireEvent.click(dot[1]);
+      expect(content.querySelector('.active>div').innerHTML).toBe('Autumn');
+    });
   });
 
   test('Swipe Slides', async () => {
@@ -102,9 +109,9 @@ describe('Slider Component', () => {
     act(() => {
       const { container } = render(
         <Slider>
-          {list.map((element) => {
-            return <div key={keygen()}>{element}</div>;
-          })}
+          {list.map((element) => (
+            <div key={keygen()}>{element}</div>
+          ))}
         </Slider>
       );