page refresh taking alot of time or may be not loading

I'm new to Solid.js, and I'm facing a problem with browser refreshing. When I make changes to my project and try to view them in Chrome, the page gets stuck in a loading state with the loading icon spinning indefinitely. This issue persists even after a long wait. I've tried using other browsers like Brave and Firefox as well. While these browsers initially load the page correctly when I enter the localhost URL, refreshing the page results in the same loading issue in Brave. In Firefox, the page works for a while, but eventually exhibits the same behavior, causing the browser to slow down. Can you please help me troubleshoot this problem?
No description
No description
No description
6 Replies
peerreynders
peerreynders2mo ago
The "page unresponsive" message appears when a script never ends because of an "infinite loop". So it's entirely possible that you've created a cycle in the reactive graph so the graph never stops updating.
ghost_soul0
ghost_soul02mo ago
Thanks, @peerreynders ! I'm not familiar with js as much, but what you said about the loop makes sense . In my code, there's a part that keeps generating emojis and checking for overlaps. This could be looping forever and causing the page to freeze may be . The code is as below : for (let i = 0; i < 100; i++) { let emoji = emojiList[Math.floor(Math.random() * emojiList.length)]; let top, left; do { top = Math.random() * window.innerHeight; left = Math.random() * window.innerWidth; } while (newEmojis.some(existingEmoji => emojisOverlap(existingEmoji, { top, left }))); newEmojis.push({ emoji, top, left }); } return newEmojis; will removing the while loop solve this issue ?
peerreynders
peerreynders2mo ago
It's not necessarily a JavaScript loop; it could be that your signals/stores/effects are linked in a cycle; something depends on a reactive source but that something now feeds into the that source itself; now you have a reactive cycle.
ghost_soul0
ghost_soul02mo ago
Thanks for explaining that! I got to know it first time .But When I removed the code from the return block, the page started loading and refreshing normally. It seems like that loop might have been reason for the issue I was facing . Is there any other way I can generate emojis randomly all over the window in background , without facing this issue ?
peerreynders
peerreynders2mo ago
Just stop trying?
for (let i = 0; i < 100; i += 1) {
const emoji = emojiList[Math.floor(Math.random() * emojiList.length)];
let nextEmoji = undefined;
for (let attempt = 0; attempt < 20; attempt += 1) {
const origin = {
top: Math.random() * window.innerHeight,
left: Math.random() * window.innerWidth,
};
if (newEmojis.some((existingEmoji) => emojisOverlap(existingEmoji, origin)))
continue; // try another origin

// this is a keeper
nextEmoji = { emoji, ...origin };
break;
}

if (nextEmoji) newEmojis.push(nextEmoji);
else break; // it's time to stop trying
}
for (let i = 0; i < 100; i += 1) {
const emoji = emojiList[Math.floor(Math.random() * emojiList.length)];
let nextEmoji = undefined;
for (let attempt = 0; attempt < 20; attempt += 1) {
const origin = {
top: Math.random() * window.innerHeight,
left: Math.random() * window.innerWidth,
};
if (newEmojis.some((existingEmoji) => emojisOverlap(existingEmoji, origin)))
continue; // try another origin

// this is a keeper
nextEmoji = { emoji, ...origin };
break;
}

if (nextEmoji) newEmojis.push(nextEmoji);
else break; // it's time to stop trying
}
ghost_soul0
ghost_soul02mo ago
wow thank you so much ! Now page refresh is working totally fine with the randomly placed emojis. Your solution, which includes limiting the number of attempts to find a non-overlapping position for each emoji, is a smart way to prevent potential infinite loops. It ensures that the code stops trying after a reasonable number of attempts, thereby avoiding any performance issues. And thank you helping me .