fix the broken loading delay again

Did it revert? Or did I just never notice that it only worked on mount, not on new loading states?

Also, fixed a bug where we were injecting the script tag way too much, and triggering loading too much that way too!
This commit is contained in:
Emi Matchu 2020-09-21 19:03:17 -07:00
parent 7677a60bbe
commit feaaf97dce

View file

@ -102,10 +102,18 @@ export function OutfitLayers({
false false
); );
// When we start in a loading state, or re-enter a loading state, start the
// loading delay timer.
React.useEffect(() => { React.useEffect(() => {
const t = setTimeout(() => setLoadingDelayHasPassed(true), loadingDelayMs); if (loading) {
setLoadingDelayHasPassed(false);
const t = setTimeout(
() => setLoadingDelayHasPassed(true),
loadingDelayMs
);
return () => clearTimeout(t); return () => clearTimeout(t);
}, [loadingDelayMs]); }
}, [loadingDelayMs, loading]);
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
function computeAndSizeCanvasSize() { function computeAndSizeCanvasSize() {
@ -121,6 +129,8 @@ export function OutfitLayers({
return () => window.removeEventListener("resize", computeAndSizeCanvasSize); return () => window.removeEventListener("resize", computeAndSizeCanvasSize);
}, [setCanvasSize]); }, [setCanvasSize]);
console.log(loading, scriptsLoading);
return ( return (
<Box <Box
pos="relative" pos="relative"
@ -274,6 +284,14 @@ function useScriptTag(src) {
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
React.useEffect(() => { React.useEffect(() => {
const existingScript = document.querySelector(
`script[src=${CSS.escape(src)}]`
);
if (existingScript) {
setLoading(false);
return;
}
let canceled = false; let canceled = false;
const script = document.createElement("script"); const script = document.createElement("script");
script.onload = () => { script.onload = () => {