I am having a issue where 1/5 fresh loads of my app hang for about 45 seconds before any queries, or page features. Just on a white screen. Every other load is very fast and once the app is running it is awesome.
It seems to hang on this blob according to chrome's network settings
blob:https://xxxx.retool.com/fc81661d-f149-4cb6-8fc9-befe057452d7
When I click the blob in chrome's dev tools I see this code, and Failed To Load Response Data
I don't use confetti anywhere in my apps.
I also see
Cannot GET /api/ddMetric
var CONFETTI, SIZE = {}, module = {};
(function Y(K,J,ee,te){var re=!!(K.Worker&&K.Blob&&K.Promise&&K.OffscreenCanvas&&K.OffscreenCanvasRenderingContext2D&&K.HTMLCanvasElement&&K.HTMLCanvasElement.prototype.transferControlToOffscreen&&K.URL&&K.URL.createObjectURL);function ne(){}function oe(Ie){var we=J.exports.Promise,De=we!==void 0?we:K.Promise;return typeof De=="function"?new De(Ie):(Ie(ne,ne),null)}var ie=function(){var Ie=Math.floor(16.666666666666668),we,De,Fe={},ke=0;return typeof requestAnimationFrame=="function"&&typeof cancelAnimationFrame=="function"?(we=function(Ue){var Ne=Math.random();return Fe[Ne]=requestAnimationFrame(function ze(xe){ke===xe||ke+Ie-1<xe?(ke=xe,delete Fe[Ne],Ue()):Fe[Ne]=requestAnimationFrame(ze)}),Ne},De=function(Ue){Fe[Ue]&&cancelAnimationFrame(Fe[Ue])}):(we=function(Ue){return setTimeout(Ue,Ie)},De=function(Ue){return clearTimeout(Ue)}),{frame:we,cancel:De}}(),ae=function(){var Ie,we,De={};function Fe(ke){function Ue(Ne,ze){ke.postMessage({options:Ne||{},callback:ze})}ke.init=function(ze){var xe=ze.transferControlToOffscreen();ke.postMessage({canvas:xe},[xe])},ke.fire=function(ze,xe,We){if(we)return Ue(ze,null),we;var Ye=Math.random().toString(36).slice(2);return we=oe(function(Xe){function Be(Ge){Ge.data.callback===Ye&&(delete De[Ye],ke.removeEventListener("message",Be),we=null,We(),Xe())}ke.addEventListener("message",Be),Ue(ze,Ye),De[Ye]=Be.bind(null,{data:{callback:Ye}})}),we},ke.reset=function(){ke.postMessage({reset:!0});for(var ze in De)De[ze](),delete De[ze]}}return function(){if(Ie)return Ie;if(!ee&&re){var ke=["var CONFETTI, SIZE = {}, module = {};","("+Y.toString()+")(this, module, true, SIZE);","onmessage = function(msg) {"," if (msg.data.options) {"," CONFETTI(msg.data.options).then(function () {"," if (msg.data.callback) {"," postMessage({ callback: msg.data.callback });"," }"," });"," } else if (msg.data.reset) {"," CONFETTI.reset();"," } else if (msg.data.resize) {"," SIZE.width = msg.data.resize.width;"," SIZE.height = msg.data.resize.height;"," } else if (msg.data.canvas) {"," SIZE.width = msg.data.canvas.width;"," SIZE.height = msg.data.canvas.height;"," CONFETTI = module.exports.create(msg.data.canvas);"," }","}"].join(`
`);try{Ie=new Worker(URL.createObjectURL(new Blob([ke])))}catch(Ue){return typeof console!==void 0&&typeof console.warn=="function"&&console.warn("🎊Could not load worker",Ue),null}Fe(Ie)}return Ie}}(),se={particleCount:50,angle:90,spread:45,startVelocity:45,decay:.9,gravity:1,drift:0,ticks:200,x:.5,y:.5,shapes:["square","circle"],zIndex:100,colors:["#26ccff","#a25afd","#ff5e7e","#88ff5a","#fcff42","#ffa62d","#ff36ff"],disableForReducedMotion:!1,scalar:1};function ce(Ie,we){return we?we(Ie):Ie}function he(Ie){return Ie!=null}function ue(Ie,we,De){return ce(Ie&&he(Ie[we])?Ie[we]:se[we],De)}function le(Ie){return Ie<0?0:Math.floor(Ie)}function fe(Ie,we){return Math.floor(Math.random()*(we-Ie))+Ie}function pe(Ie){return parseInt(Ie,16)}function me(Ie){return Ie.map(ye)}function ye(Ie){var we=String(Ie).replace(/[^0-9a-f]/gi,"");return we.length<6&&(we=we[0]+we[0]+we[1]+we[1]+we[2]+we[2]),{r:pe(we.substring(0,2)),g:pe(we.substring(2,4)),b:pe(we.substring(4,6))}}function be(Ie){var we=ue(Ie,"origin",Object);return we.x=ue(we,"x",Number),we.y=ue(we,"y",Number),we}function ve(Ie){Ie.width=document.documentElement.clientWidth,Ie.height=document.documentElement.clientHeight}function Oe(Ie){var we=Ie.getBoundingClientRect();Ie.width=we.width,Ie.height=we.height}function _e(Ie){var we=document.createElement("canvas");return we.style.position="fixed",we.style.top="0px",we.style.left="0px",we.style.pointerEvents="none",we.style.zIndex=Ie,we}function Ae(Ie,we,De,Fe,ke,Ue,Ne,ze,xe){Ie.save(),Ie.translate(we,De),Ie.rotate(Ue),Ie.scale(Fe,ke),Ie.arc(0,0,1,Ne,ze,xe),Ie.restore()}function Ee(Ie){var we=Ie.angle*(Math.PI/180),De=Ie.spread*(Math.PI/180);return{x:Ie.x,y:Ie.y,wobble:Math.random()*10,velocity:Ie.startVelocity*.5+Math.random()*Ie.startVelocity,angle2D:-we+(.5*De-Math.random()*De),tiltAngle:Math.random()*Math.PI,color:Ie.color,shape:Ie.shape,tick:0,totalTicks:Ie.ticks,decay:Ie.decay,drift:Ie.drift,random:Math.random()+5,tiltSin:0,tiltCos:0,wobbleX:0,wobbleY:0,gravity:Ie.gravity*3,ovalScalar:.6,scalar:Ie.scalar}}function Pe(Ie,we){we.x+=Math.cos(we.angle2D)*we.velocity+we.drift,we.y+=Math.sin(we.angle2D)*we.velocity+we.gravity,we.wobble+=.1,we.velocity*=we.decay,we.tiltAngle+=.1,we.tiltSin=Math.sin(we.tiltAngle),we.tiltCos=Math.cos(we.tiltAngle),we.random=Math.random()+5,we.wobbleX=we.x+10*we.scalar*Math.cos(we.wobble),we.wobbleY=we.y+10*we.scalar*Math.sin(we.wobble);var De=we.tick++/we.totalTicks,Fe=we.x+we.random*we.tiltCos,ke=we.y+we.random*we.tiltSin,Ue=we.wobbleX+we.random*we.tiltCos,Ne=we.wobbleY+we.random*we.tiltSin;return Ie.fillStyle="rgba("+we.color.r+", "+we.color.g+", "+we.color.b+", "+(1-De)+")",Ie.beginPath(),we.shape==="circle"?Ie.ellipse?Ie.ellipse(we.x,we.y,Math.abs(Ue-Fe)*we.ovalScalar,Math.abs(Ne-ke)*we.ovalScalar,Math.PI/10*we.wobble,0,2*Math.PI):Ae(Ie,we.x,we.y,Math.abs(Ue-Fe)*we.ovalScalar,Math.abs(Ne-ke)*we.ovalScalar,Math.PI/10*we.wobble,0,2*Math.PI):(Ie.moveTo(Math.floor(we.x),Math.floor(we.y)),Ie.lineTo(Math.floor(we.wobbleX),Math.floor(ke)),Ie.lineTo(Math.floor(Ue),Math.floor(Ne)),Ie.lineTo(Math.floor(Fe),Math.floor(we.wobbleY))),Ie.closePath(),Ie.fill(),we.tick<we.totalTicks}function Se(Ie,we,De,Fe,ke){var Ue=we.slice(),Ne=Ie.getContext("2d"),ze,xe,We=oe(function(Ye){function Xe(){ze=xe=null,Ne.clearRect(0,0,Fe.width,Fe.height),ke(),Ye()}function Be(){ee&&!(Fe.width===te.width&&Fe.height===te.height)&&(Fe.width=Ie.width=te.width,Fe.height=Ie.height=te.height),!Fe.width&&!Fe.height&&(De(Ie),Fe.width=Ie.width,Fe.height=Ie.height),Ne.clearRect(0,0,Fe.width,Fe.height),Ue=Ue.filter(function(Ge){return Pe(Ne,Ge)}),Ue.length?ze=ie.frame(Be):Xe()}ze=ie.frame(Be),xe=Xe});return{addFettis:function(Ye){return Ue=Ue.concat(Ye),We},canvas:Ie,promise:We,reset:function(){ze&&ie.cancel(ze),xe&&xe()}}}function $e(Ie,we){var De=!Ie,Fe=!!ue(we||{},"resize"),ke=ue(we,"disableForReducedMotion",Boolean),Ue=re&&!!ue(we||{},"useWorker"),Ne=Ue?ae():null,ze=De?ve:Oe,xe=Ie&&Ne?!!Ie.__confetti_initialized:!1,We=typeof matchMedia=="function"&&matchMedia("(prefers-reduced-motion)").matches,Ye;function Xe(Ge,tt,ot){for(var Me=ue(Ge,"particleCount",le),Te=ue(Ge,"angle",Number),ge=ue(Ge,"spread",Number),Re=ue(Ge,"startVelocity",Number),Ce=ue(Ge,"decay",Number),Le=ue(Ge,"gravity",Number),qe=ue(Ge,"drift",Number),je=ue(Ge,"colors",me),He=ue(Ge,"ticks",Number),Ve=ue(Ge,"shapes"),Qe=ue(Ge,"scalar"),Ke=be(Ge),Je=Me,Ze=[],at=Ie.width*Ke.x,nt=Ie.height*Ke.y;Je--;)Ze.push(Ee({x:at,y:nt,angle:Te,spread:ge,startVelocity:Re,color:je[Je%je.length],shape:Ve[fe(0,Ve.length)],ticks:He,decay:Ce,gravity:Le,drift:qe,scalar:Qe}));return Ye?Ye.addFettis(Ze):(Ye=Se(Ie,Ze,ze,tt,ot),Ye.promise)}function Be(Ge){var tt=ke||ue(Ge,"disableForReducedMotion",Boolean),ot=ue(Ge,"zIndex",Number);if(tt&&We)return oe(function(Re){Re()});De&&Ye?Ie=Ye.canvas:De&&!Ie&&(Ie=_e(ot),document.body.appendChild(Ie)),Fe&&!xe&&ze(Ie);var Me={width:Ie.width,height:Ie.height};Ne&&!xe&&Ne.init(Ie),xe=!0,Ne&&(Ie.__confetti_initialized=!0);function Te(){if(Ne){var Re={getBoundingClientRect:function(){if(!De)return Ie.getBoundingClientRect()}};ze(Re),Ne.postMessage({resize:{width:Re.width,height:Re.height}});return}Me.width=Me.height=null}function ge(){Ye=null,Fe&&K.removeEventListener("resize",Te),De&&Ie&&(document.body.removeChild(Ie),Ie=null,xe=!1)}return Fe&&K.addEventListener("resize",Te,!1),Ne?Ne.fire(Ge,Me,ge):Xe(Ge,Me,ge)}return Be.reset=function(){Ne&&Ne.reset(),Ye&&Ye.reset()},Be}J.exports=$e(null,{useWorker:!0,resize:!0}),J.exports.create=$e})(this, module, true, SIZE);
onmessage = function(msg) {
if (msg.data.options) {
CONFETTI(msg.data.options).then(function () {
if (msg.data.callback) {
postMessage({ callback: msg.data.callback });
}
});
} else if (msg.data.reset) {
CONFETTI.reset();
} else if (msg.data.resize) {
SIZE.width = msg.data.resize.width;
SIZE.height = msg.data.resize.height;
} else if (msg.data.canvas) {
SIZE.width = msg.data.canvas.width;
SIZE.height = msg.data.canvas.height;
CONFETTI = module.exports.create(msg.data.canvas);
}
}
