gatsby-core-theme 29.0.3 → 29.0.5-beta.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [29.0.5-beta.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.4...v29.0.5-beta.1) (2023-09-07)
+
+
+### Bug Fixes
+
+* lazy stuff ([06bb176](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/06bb176318c1ac37c494ef2789c8d741a32aa02b))
+* lazy stuff ([d61e466](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d61e466c049a322d9a285d35c71b588e65cc25b3))
+* lazy stuff ([cb7267d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cb7267dccbb38481b3910680fbb90d699354ec5b))
+* lazy stuff ([65ecb12](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/65ecb12c37d8d5d87cf9e1c999ca075d9d8f1982))
+
+
+* Merge branch 'tm-3098-lazy' into 'beta' ([b1d9ef7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b1d9ef7e88fc23323a4ba00addcce6c76523b6cf))
+
+## [29.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.3...v29.0.4) (2023-09-07)
+
+
+### Bug Fixes
+
+* add name for slots ([a337862](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a3378622c2143f527f1da734ad5563a91744776f))
+
 ## [29.0.3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v29.0.2...v29.0.3) (2023-09-06)
 
 

package/gatsby-config.js

@@ -1,9 +1,8 @@
 module.exports = {
   flags: {
-    DEV_SSR: false,
+    DEV_SSR: true,
   },
   plugins: [
-    'gatsby-plugin-loadable-components-ssr',
     {
       resolve: 'gatsby-plugin-sass',
       options: {
@@ -17,13 +16,6 @@ module.exports = {
         additionalData: '@import "gatsby-core-theme/src/styles/globals.scss";',
       },
     },
-    {
-      resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
-      options: {
-        devMode: true,
-        disable: true,
-      },
-    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "29.0.3",
+  "version": "29.0.5-beta.1",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "directories": {
@@ -16,10 +16,6 @@
     "build-storybook": "cross-env STORYBOOK_IMAGE_CDN_URL=https://cdn.irishluck.ie STORYBOOK_GATSBY_SITE_NAME=norskespilleautomater.com STORYBOOK_TRACKER_LINK_FORMAT_NON_MAIN=[no],[visit],short_name STORYBOOK_TRACKER_LINK_FORMAT_MAIN=[no],[visit],short_name build-storybook"
   },
   "dependencies": {
-    "@loadable/babel-plugin": "^5.15.3",
-    "@loadable/component": "^5.15.3",
-    "@loadable/server": "^5.15.3",
-    "@loadable/webpack-plugin": "^5.14.2",
     "@reach/router": "^1.3.3",
     "@react-icons/all-files": "^4.1.0",
     "axios": "^0.21.1",
@@ -31,7 +27,6 @@
     "gatsby": "^5.11.0",
     "gatsby-image": "^3.11.0",
     "gatsby-plugin-image": "^3.11.0",
-    "gatsby-plugin-loadable-components-ssr": "^4.2.0",
     "gatsby-plugin-manifest": "^5.11.0",
     "gatsby-plugin-postcss": "^6.11.0",
     "gatsby-plugin-sass": "^6.11.0",
@@ -76,7 +71,6 @@
     "babel-preset-gatsby": "^3.11.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-react": "^7.22.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.26",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",

package/src/components/app.js

@@ -2,7 +2,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import MainProvider from '~context/MainProvider';
 import Body from '~pages/body';
 import HeadData from '~organisms/head';
@@ -49,8 +49,10 @@ const App = ({ pageContext }) => {
     }
   }
 
-  const TrackerContent = isTracker ? loadable(() => import(`~pages/tracker`)) : null;
-  const TrackerGeoContent = isTrackeGeo ? loadable(() => import(`~pages/tracker-geo`)) : null;
+  const TrackerContent = isTracker ? Loadable(React.lazy(() => import(`~pages/tracker`))) : null;
+  const TrackerGeoContent = isTrackeGeo
+    ? Loadable(React.lazy(() => import(`~pages/tracker-geo`)))
+    : null;
 
   if (TrackerGeoContent) {
     return (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
 import styles from './iframe.module.scss';
 
@@ -12,7 +12,7 @@ const Iframe = ({
   frameBorder = 1,
 }) => {
   if (!isNativeImageLazyLoadingSupported() && lazyLoad) {
-    const LazyLoad = loadable(() => import(`react-lazyload`));
+    const LazyLoad = Loadable(React.lazy(() => import(`react-lazyload`)));
     return (
       <>
         <LazyLoad>

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

@@ -5,8 +5,8 @@ import parse from 'html-react-parser';
 import PropTypes from 'prop-types';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { parseCss } from 'gatsby-core-theme/src/helpers/css-parser';
-import loadable from '@loadable/component';
 import { parseContentImageUrl } from 'gatsby-core-theme/src/helpers/strings';
+import Loadable from '~hooks/loadable';
 import { generatePlaceholderString } from '../../../helpers/generators';
 import { Context } from '~context/MainProvider';
 import styles from './content.module.scss';
@@ -21,7 +21,9 @@ const Content = ({ module, isHomepageFirstModule = false, isModuleIntroduction =
 
   const replaceMedia = (node) => {
     if (node.name === 'iframe') {
-      const Iframe = loadable(() => import('gatsby-core-theme/src/components/atoms/iframe'));
+      const Iframe = Loadable(
+        React.lazy(() => import('gatsby-core-theme/src/components/atoms/iframe'))
+      );
       return <Iframe src={node.attribs.src} />;
     }
 
@@ -42,7 +44,7 @@ const Content = ({ module, isHomepageFirstModule = false, isModuleIntroduction =
       const lazyProps = {
         src: parseContentImageUrl(node.attribs.src),
         width: node.attribs.width && node.attribs.width.replace('px', ''),
-        height: node.attribs.height && node.attribs.height.replace('px', ''),
+        height: 300,
         style: node.attribs.style ? parseCss(node.attribs.style) : null,
         alt: node.attribs.alt ? node.attribs.alt : 'missing alt',
         className: styles[stylesClass],

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

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

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import styles from './header.module.scss';
 import Breadcrumbs from '~atoms/breadcrumbs';
 import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
@@ -47,7 +46,7 @@ function Header({ section, content = null, backgroundImage = true, showAuthor =
     section.page.path !== 'sitemap' &&
     section.page.author &&
     showAuthor
-      ? loadable(() => import('~atoms/author'))
+      ? Loadable(React.lazy(() => import('~atoms/author')))
       : null;
 
   return (
@@ -111,7 +110,7 @@ Header.propTypes = {
         url: PropTypes.string,
         email: PropTypes.string,
       }),
-      authors: PropTypes.shape([PropTypes.shape({})]),
+      authors: PropTypes.arrayOf(PropTypes.shape({})),
       sections: PropTypes.shape({
         header: PropTypes.shape({
           extra_fields: PropTypes.shape({

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import Module from '~molecules/module';
 import styles from './main.module.scss';
 import keygen from '~helpers/keygen';
@@ -11,10 +11,14 @@ const Main = ({ section = {}, pageContext = {}, serverData = {}, exclOperator =
 
   const pathPrefixes = isSearchPath(allMarkets, page.path);
 
-  const SearchPage = pathPrefixes ? loadable(() => import(`~pages/search`)) : null;
-  const HtmlSitemap = pageContext.sitemapData ? loadable(() => import(`~atoms/sitemap`)) : null;
-  const AuthorBox = page.author_id ? loadable(() => import(`~atoms/author-box`)) : null;
-  const NotFound = page?.path?.includes('404') ? loadable(() => import(`~atoms/not-found`)) : null;
+  const SearchPage = pathPrefixes ? Loadable(React.lazy(() => import(`~pages/search`))) : null;
+  const HtmlSitemap = pageContext.sitemapData
+    ? Loadable(React.lazy(() => import(`~atoms/sitemap`)))
+    : null;
+  const AuthorBox = page.author_id ? Loadable(React.lazy(() => import(`~atoms/author-box`))) : null;
+  const NotFound = page?.path?.includes('404')
+    ? Loadable(React.lazy(() => import(`~atoms/not-found`)))
+    : null;
 
   return (
     <main className={styles.modulePage || ''}>

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

@@ -2,8 +2,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
-
+import Loadable from '~hooks/loadable';
 import styles from './module.module.scss';
 import ModuleTitle from '~atoms/module-title';
 import { anchorLink, removeSymbols } from '~helpers/strings';
@@ -14,31 +13,31 @@ const Modules = ({ module, page, pageContext }) => {
 
     switch (name) {
       case 'content':
-        return loadable(() => import('~molecules/content'));
+        return Loadable(React.lazy(() => import('~molecules/content')));
       case 'top_list':
-        return loadable(() => import('~organisms/toplist'));
+        return Loadable(React.lazy(() => import('~organisms/toplist')));
       case 'archive':
         if (!items || items.length === 0) return null;
-        return loadable(() => import('~organisms/archive'));
+        return Loadable(React.lazy(() => import('~organisms/archive')));
       case 'counter':
-        return loadable(() => import('~molecules/counter'));
+        return Loadable(React.lazy(() => import('~molecules/counter')));
       case 'cards':
       case 'cards_v2':
-        return loadable(() => import('~organisms/cards'));
+        return Loadable(React.lazy(() => import('~organisms/cards')));
       case 'contact_form':
-        return loadable(() => import('~atoms/contact-form'));
+        return Loadable(React.lazy(() => import('~atoms/contact-form')));
       case 'pros_and_cons':
-        return loadable(() => import('~molecules/pros-cons'));
+        return Loadable(React.lazy(() => import('~molecules/pros-cons')));
       case 'faq':
         if (moduleItem?.display_front_end === '1') {
-          return loadable(() => import('~atoms/faq'));
+          return Loadable(React.lazy(() => import('~atoms/faq')));
         }
         return null;
       case 'accordion':
-        return loadable(() => import('~organisms/accordion'));
+        return Loadable(React.lazy(() => import('~organisms/accordion')));
       case 'anchor':
         if (items && items.length > 0) {
-          return loadable(() => import('~organisms/anchor'));
+          return Loadable(React.lazy(() => import('~organisms/anchor')));
         }
         return null;
       case 'carousel':
@@ -46,15 +45,15 @@ const Modules = ({ module, page, pageContext }) => {
           items.length > 0 && // has items
           items.filter((item) => item.image === null).length === 0 // not filled with null items
         ) {
-          return loadable(() => import('~organisms/carousel'));
+          return Loadable(React.lazy(() => import('~organisms/carousel')));
         }
         return null;
       case 'bonus':
-        return loadable(() => import('~molecules/bonus/template-one'));
+        return Loadable(React.lazy(() => import('~molecules/bonus/template-one')));
       case 'image':
-        return loadable(() => import('~atoms/image'));
+        return Loadable(React.lazy(() => import('~atoms/image')));
       case 'spotlights':
-        return loadable(() => import('~atoms/spotlights'));
+        return Loadable(React.lazy(() => import('~atoms/spotlights')));
       default:
         return null;
     }
@@ -86,7 +85,8 @@ const Modules = ({ module, page, pageContext }) => {
     '--module-background-color': module.background_color,
   };
 
-  const ModuleIntro = module.module_introduction && loadable(() => import('~molecules/content'));
+  const ModuleIntro =
+    module.module_introduction && Loadable(React.lazy(() => import('~molecules/content')));
   return (
     ModuleComponent && (
       <div

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/all-files/fa/FaSearch';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import LazyImage from '~hooks/lazy-image';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
 import styles from './search.module.scss';
@@ -222,7 +222,7 @@ const Search = ({
     }
   }, [pageSearchOptionsCopy]);
   if (pageSearchOptionsCopy !== null && pageSearchOptionsCopy.sort !== undefined) {
-    const CustomSelect = loadable(() => import('~atoms/custom-select'));
+    const CustomSelect = Loadable(React.lazy(() => import('~atoms/custom-select')));
 
     pageSearchOptionsCopy.tabsOptions.HeaderComp = (
       <div className={styles.selectwrapper}>
@@ -259,7 +259,8 @@ const Search = ({
     );
   }
 
-  const Tabs = searchResultsRef.current.length !== 0 && loadable(() => import('~hooks/tabs'));
+  const Tabs =
+    searchResultsRef.current.length !== 0 && Loadable(React.lazy(() => import('~hooks/tabs')));
 
   return (
     <>
@@ -369,7 +370,7 @@ const Search = ({
 
                 if (items.length === 0) return null;
 
-                const Archive = loadable(() => import('~organisms/archive'));
+                const Archive = Loadable(React.lazy(() => import('~organisms/archive')));
 
                 return (
                   // eslint-disable-next-line react/no-unknown-property

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

@@ -2,7 +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 Loadable from '~hooks/loadable';
 
 import {
   updateSlider,
@@ -186,7 +186,7 @@ function Slider({
   });
 
   const Pagination = usePagination
-    ? loadable(() => import('~atoms/carousel/pagination-item'))
+    ? Loadable(React.lazy(() => import('~atoms/carousel/pagination-item')))
     : null;
 
   return (

package/src/components/organisms/navigation/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-named-as-default */
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import Link from '~hooks/link';
 import Menu from '~molecules/menu';
 import { toggleScroll } from '~helpers/scroll';
@@ -35,9 +35,9 @@ const Navigation = ({
 
   let searchURLPageName = 's';
 
-  const Search = hasSearch ? loadable(() => import('~organisms/search')) : null;
+  const Search = hasSearch ? Loadable(React.lazy(() => import('~organisms/search'))) : null;
   const CustomComponent = hasCustomComponent
-    ? loadable(() => import('~atoms/menu/variables'))
+    ? Loadable(React.lazy(() => import('~atoms/menu/variables')))
     : null;
   const logoImg = (
     <img
@@ -136,7 +136,7 @@ Navigation.propTypes = {
   pageContext: PropTypes.shape({
     allMarkets: PropTypes.shape({}),
     page: PropTypes.shape({
-      market: PropTypes.shape({}),
+      market: PropTypes.string,
     }),
   }),
   hasSearch: PropTypes.bool,

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

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
-import { FaSearch } from '@react-icons/all-files/fa/FaSearch';
 
+import { FaSearch } from '@react-icons/all-files/fa/FaSearch';
+import Loadable from '~hooks/loadable';
 import { toggleScroll } from '~helpers/scroll';
 
 import { NavigationContext } from '../navigation/navigationContext';
@@ -18,14 +18,22 @@ const SearchForm = ({
   searchURLPageName,
 }) => {
   const { showSearch, setShowSearch, setShowMenu, showMenu } = useContext(NavigationContext);
-  const Search = showSearch ? loadable(() => import('~molecules/search')) : <></>;
+  const Search = showSearch ? Loadable(React.lazy(() => import('~molecules/search'))) : <></>;
   const Operator = showSearch ? (
-    loadable(() => import('~atoms/search/autocomplete/operator'))
+    Loadable(React.lazy(() => import('~atoms/search/autocomplete/operator')))
+  ) : (
+    <></>
+  );
+  const Game = showSearch ? (
+    Loadable(React.lazy(() => import('~atoms/search/autocomplete/game')))
+  ) : (
+    <></>
+  );
+  const Article = showSearch ? (
+    Loadable(React.lazy(() => import('~atoms/search/autocomplete/article')))
   ) : (
     <></>
   );
-  const Game = showSearch ? loadable(() => import('~atoms/search/autocomplete/game')) : <></>;
-  const Article = showSearch ? loadable(() => import('~atoms/search/autocomplete/article')) : <></>;
 
   const handleOnSearchIconClick = () => {
     setShowSearch(!showSearch);

package/src/components/organisms/toplist/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import keygen from '~helpers/keygen';
 import List from './list';
 import styles from './toplist.module.scss';
@@ -24,7 +24,7 @@ const TopList = ({ module, toplistHeading, CustomRow, page }) => {
       />
     </div>
   ));
-  const Tabs = showTabs && loadable(() => import('~hooks/tabs'));
+  const Tabs = showTabs && Loadable(React.lazy(() => import('~hooks/tabs')));
 
   return showTabs ? (
     // eslint-disable-next-line react/no-children-prop

package/src/components/organisms/toplist/list/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-return-assign */
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import keygen from '~helpers/keygen';
 import Button from '~atoms/button';
 import styles from './list.module.scss';
@@ -37,7 +37,7 @@ export default function List({
     }
   }
 
-  const Row = !CustomRow && loadable(() => import('~molecules/toplist/default-row'));
+  const Row = !CustomRow && Loadable(React.lazy(() => import('~molecules/toplist/default-row')));
 
   return (
     <>

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

@@ -3,7 +3,7 @@
 /* eslint-disable no-restricted-globals */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import { getSection } from '~helpers/getters';
 import Header from '~molecules/header';
 import Main from '~molecules/main';
@@ -49,7 +49,9 @@ function Body({ pageContext, children, hideOperatorBanner, serverData }) {
   const pageType = pageContext.page.relation_type;
   const OperatorBanner =
     pageType === 'operator' && !hideBanner && !hideOperatorBanner
-      ? loadable(() => import(`gatsby-core-theme/src/components/molecules/bonus/template-two`))
+      ? Loadable(
+          React.lazy(() => import(`gatsby-core-theme/src/components/molecules/bonus/template-two`))
+        )
       : null;
 
   return (

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

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

package/src/constants/pick-keys.mjs

@@ -76,6 +76,7 @@ export const pickRelationKeys = {
     'fourth_rating',
     'thumbnail_filename',
     'thumbnail_filename_object',
+    'name'
   ],
   software_provider: [
     'logo_filename_object',

package/src/hooks/loadable/index.js

@@ -0,0 +1,10 @@
+import React, { Suspense } from 'react';
+
+const Loadable = (Component) => (props) =>
+  (
+    <Suspense>
+      <Component {...props} />
+    </Suspense>
+  );
+
+export default Loadable;

package/src/hooks/tabs/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import Loadable from '~hooks/loadable';
 import styles from './tabs.module.scss';
 
 const Tabs = ({
@@ -17,8 +17,8 @@ const Tabs = ({
     showAll ? showAllTabId : `${children[0].props.label}_0`
   );
   const showTabs = children.length > 1;
-  const TabList = showTabs && loadable(() => import('./tab/tab-list'));
-  const { forceCheck } = TabList && loadable(() => import('react-lazyload'));
+  const TabList = showTabs && Loadable(React.lazy(() => import('./tab/tab-list')));
+  const { forceCheck } = TabList && Loadable(React.lazy(() => import('react-lazyload')));
   const tabHeaderClass = `${styles.tabsHeader || ''} ${!HeaderComp ? styles.tabsOnly || '' : ''} ${
     styles[headerClass] || ''
   } ${tabsAlign === 'right' ? styles.invertOrder : ''}`;