Show a message if loading own comments is taking >10s

[keikari]

Fixes:

User complained about loading own comments "hanging". It took ~30s on their account.

Now loading long would look like this:

large-comment-history.mp4

[keikari]

Just realized that useEffect may be unnecessary here. Will try without it.

EDIT: Works just the same without it.

[infinite-persistence]

• We aren't supposed to make side-effects inside a render function, so my suggestion is to use the previous version. That would be the norm.
• I think that effect version should be fine -- feel free to go ahead with this 👍

---

2 minor issues if want to improve:

• The timer might not be cleared if the page is moved away while fetching (usually, an effect's return statement is used to clean up)
• The ref could be avoidable if doCommentListOwn is await-able (can be tweaked to make it so).

The following is GPT's suggestion (but again, your previous one is fine):

React.useEffect(() => {
  let timeout;

  const fetchData = async () => {
    setIsLoadingLong(false);

    if (page !== 0 && activeChannelId) {
      timeout = setTimeout(() => setIsLoadingLong(true), 10000);
      
      try {
        await doCommentListOwn(activeChannelId, page, COMMENT_PAGE_SIZE_TOP_LEVEL);
      } catch (error) {
        // Handle any errors here
      } finally {
        clearTimeout(timeout); // Clear the timeout if the function finishes or fails
      }
    }
  };

  fetchData();
  return () => clearTimeout(timeout); // Ensure the timeout is cleared when the component unmounts
}, [page]); // eslint-disable-line react-hooks/exhaustive-deps

[keikari]

Changed to the GPT's solution. Thanks!

[tzarebczan]

Thanks guys!