gatsby-core-theme 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [5.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v5.0.0...v5.0.1) (2022-03-02)
+
+
+### Bug Fixes
+
+* google bot images ([53fc90c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/53fc90c24cc7bacc9d5911fb05c29dae611fbc1f))
+* lazy image tests ([ef63ea8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ef63ea88cd2ff7b3dac335afd30e75e872cdff61))
+
+
+* Merge branch 'tm-2743-googlebot-images' into 'master' ([2156666](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/21566661cd703480bb5e58bba9b2b6e1ecb49121))
+
 # [5.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v4.0.0...v5.0.0) (2022-03-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/hooks/lazy-image/index.js

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import LazyLoad from 'react-lazyload';
 import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
 
 export default function LazyImage({
@@ -15,56 +15,44 @@ export default function LazyImage({
   loading = 'lazy',
 }) {
   const [errorImage, setErrorImage] = useState(false);
+  const [nonNativeLazyLoaded, setNonNativeLazyLoaded] = useState(false);
+
+  useEffect(() => {
+    setNonNativeLazyLoaded(!isNativeImageLazyLoadingSupported());
+  }, []);
 
   if ((defaultImg && !src) || errorImage === true) {
     return defaultImg;
   }
 
-  if (!isNativeImageLazyLoadingSupported()) {
-    const LazyLoad = loadable(() => import(`react-lazyload`));
-    return (
-      <>
-        <LazyLoad
-          height={height ? `${height}px` : null}
-          width={width ? `${width}px` : null}
-          placeholder={<span className="lazyload-placeholder" />}
-          debounce={0}
-        >
-          <img
-            src={src}
-            className={className}
-            height={height}
-            width={width}
-            alt={alt}
-            style={style}
-          />
-        </LazyLoad>
-        <noscript>
-          <img
-            src={src}
-            className={className}
-            height={height}
-            width={width}
-            alt={alt}
-            style={style}
-          />
-        </noscript>
-      </>
-    );
-  }
-
-  return (
+  return !nonNativeLazyLoaded ? (
+    <img
+      src={src}
+      loading={loading}
+      className={className}
+      height={height}
+      width={width}
+      alt={alt}
+      style={style}
+      onError={() => setErrorImage(true)}
+    />
+  ) : (
     <>
-      <img
-        src={src}
-        loading={loading}
-        className={className}
-        height={height}
-        width={width}
-        alt={alt}
-        style={style}
-        onError={() => setErrorImage(true)}
-      />
+      <LazyLoad
+        height={height ? `${height}px` : null}
+        width={width ? `${width}px` : null}
+        placeholder={<span className="lazyload-placeholder" />}
+        debounce={0}
+      >
+        <img
+          src={src}
+          className={className}
+          height={height}
+          width={width}
+          alt={alt}
+          style={style}
+        />
+      </LazyLoad>
       <noscript>
         <img
           src={src}