SolidJS•9mo ago

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?

6 Replies

peerreynders•9mo 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_soul0OP•9mo 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•9mo 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_soul0OP•9mo 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•9mo 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_soul0OP•9mo 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 .

Gaming

Programming

page refresh taking alot of time or may be not loading