From be763cf9ad92f69e2ee67660ce2bb6f58930bc08 Mon Sep 17 00:00:00 2001 From: Dave Sayer Date: Sun, 29 Nov 2020 20:30:53 +0000 Subject: [PATCH] Attempt at fixing typeform mobile loading issue (#172) --- src/components/typeform.js | 75 ++++++++++++++++++++++---------------- 1 file changed, 44 insertions(+), 31 deletions(-) diff --git a/src/components/typeform.js b/src/components/typeform.js index 034063af..d401993c 100644 --- a/src/components/typeform.js +++ b/src/components/typeform.js @@ -1,57 +1,70 @@ -import React, { useEffect, useState, useRef } from 'react'; -import Head from '@docusaurus/Head'; +import React, { useEffect, useState, useRef } from "react"; +import Head from "@docusaurus/Head"; export function TypeformWidget(props) { const [widgetLoaded, setWidgetLoaded] = useState(false); const widgetStyle = { - width: '100%', - height: '500px', - transition: 'opacity 0.3s ease-in', - opacity: widgetLoaded ? '1' : '0', + width: "100%", + height: "500px", + transition: "opacity 0.3s ease-in", + opacity: widgetLoaded ? "1" : "0", }; const typeformStyle = { - fontFamily: 'Sans-Serif', - fontSize: '12px', - color: '#999', - opacity: '0.5', - paddingTop: '5px', + fontFamily: "Sans-Serif", + fontSize: "12px", + color: "#999", + opacity: "0.5", + paddingTop: "5px", }; const { campaign } = props; + function makeWidget(c) { + if (typeof document !== "undefined") { + const el = document.getElementById("mg-embedded-typeform"); + const doWidget = setTimeout(() => { + window.typeformEmbed.makeWidget( + el, + "https://form.typeform.com/to/" + c, + { + hideFooter: true, + hideHeaders: true, + opacity: 0, + } + ); + setWidgetLoaded(true); + }, 500); + + return doWidget; + } + } useEffect(() => { // Typeforms widget JS - const el = document.getElementById('mg-embedded-typeform'); - const doWidget = setTimeout(() => { - window.typeformEmbed.makeWidget( - el, - 'https://form.typeform.com/to/' + campaign, - { - hideFooter: true, - hideHeaders: true, - opacity: 0, - }, - ); - setWidgetLoaded(true); - }, 300); - - doWidget; + if (document.readyState !== "loading") { + makeWidget(campaign); + } else { + document.addEventListener("DOMContentLoaded", function () { + console.log(campaign); + makeWidget(campaign); + }); + } return () => { - clearTimeout(doWidget); + window.removeEventListener("DOMContentLoaded", makeWidget); + setWidgetLoaded(!widgetLoaded); }; - }, []); + }, [campaign]); return ( <> -
+
); }