Skip to content

Commit 2d4ae0d

Browse files
committed
fix: Gumlet loads dynamically in case you've updated the PWA
1 parent 4a6cdfe commit 2d4ae0d

File tree

1 file changed

+22
-2
lines changed

1 file changed

+22
-2
lines changed

src/components/impl/gumlet-image.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
1-
import React from "react";
1+
import React, { useEffect } from "react";
22
import emptyWebGif from 'empty-web-gif';
33
import { FocusedImage } from "quintype-js";
44
import { hashString, USED_PARAMS } from "./image-utils";
55
import omit from '@babel/runtime/helpers/objectWithoutProperties';
66

7+
let forceLoadingGumlet = false;
8+
function loadGumlet() {
9+
if(window.GUMLET_CONFIG || window.gumlet || forceLoadingGumlet === true) {
10+
return;
11+
}
12+
if (process.env.NODE_ENV == 'development') {
13+
console.warn("Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration");
14+
}
15+
forceLoadingGumlet = true;
16+
window.GUMLET_CONFIG = window.GUMLET_CONFIG || {
17+
hosts: []
18+
}
19+
const script = document.createElement('script');
20+
script.type = 'text/javascript';
21+
script.src = 'https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js';
22+
document.body.appendChild(script);
23+
}
24+
725
export function GumletImage(props) {
826
const { slug, metadata, aspectRatio, imageCDN, imgParams, reactTag, className } = props;
927
const image = new FocusedImage(slug, metadata);
@@ -12,10 +30,12 @@ export function GumletImage(props) {
1230
src: emptyWebGif,
1331
"data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
1432
key: hashString(slug)
15-
}
33+
};
1634

1735
const Tag = reactTag || "img";
1836

37+
useEffect(loadGumlet);
38+
1939
return <React.Fragment>
2040
<Tag {...imageProps} {...omit(props, USED_PARAMS)} className={className ? `qt-image ${className}` : 'qt-image'} />
2141
<noscript>

0 commit comments

Comments
 (0)