gatsby-core-theme 1.6.21 → 1.6.22

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "1.6.21",
+  "version": "1.6.22",
   "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/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/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>
       );
 

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

@@ -1,12 +1,13 @@
 /* eslint-disable arrow-body-style */
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import Search from '~molecules/search';
+import loadable from '@loadable/component';
 import Card from '~atoms/cards/default-card';
 import { translate } from '~helpers/getters';
 
 const SearchContent = ({ page }) => {
+  const Search = loadable(() => import('~molecules/search'));
+
   return (
     <Search
       pageSearchOptions={{