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