Forem: Posts on front page do not load until scrolled down

[Zhao-Andy]

When going to the home page, sometimes posts under the first post do not load until you scroll down. The page simply hangs and looks like this:

This seems to happen on Windows 10, Chrome. Possibly related extension is uBlock Origin.

I think that we load the posts with Algolia, so there might be some JS that is triggered by scrolling. Not 100% sure though.

[maestromac]

Is this reproducible?

[kspeakman]

I can observe this right now on the website. Whenever I am at the top of the page and I hit refresh, this is what I see.

The articles finally load when the last item in the "#shecoded" section scrolls into view. This is what it looks like just before I get to the last item.

And this is what it looks like once the last item scrolls into view.

[jessleenyc]

@kspeakman have you continued to experience this?

[kspeakman]

@jessleenyc Oh yes, every day. Here is what I see when scrolled to the top and hit refresh right now.

If I scroll down far enough, it will load the other articles. In the pic below, the very next scroll notch down will load the articles.

This happens across Brave, Chrome, Firefox. This only appears to happen when I am logged in. When I am signed out, I never see the loading behavior... the articles are just there immediately.

[jessleenyc]

That is so strange. Are you using any notable extensions across all three browsers?

[kspeakman]

I'm using both Privacy Badger and uBlock Origin. However, with both turned off (disabled in Extensions in Chrome) I still see the same behavior.

When I change the browser width to below 1120px, where the right column is gone, then it loads immediately.

[jessleenyc]

Very Interesting. Planning to bring this up with the team at our next tech meeting.

[dzhavat]

I experience this as well on Firefox. Actually came here to open an issue and founds this one. Usually the problem occurs for me right after logging in with GitHub. To fix it I either refresh the page or scroll a bit down.

[rohitshetty]

I can experience this as well with Firefox on linux, each time I goto dev.to.

[rohitshetty]

@jessleenyc @benhalpern If this is not a high priority and immediate fix can I take this up to investigate further and raise a PR if possible?

[jessleenyc]

@rohitshetty, please go for it!! We've tried looking at it last week but it's a bit trickier than we realized so additional eyes are much appreciated.

[rohitshetty]

I just replicated this on a friends laptop. The list loads alright when he is not logged in, but does not load when he is signed in. Looking into it further

[colbymelvin]

I am experiencing this on the dev.to website in both Chrome and Firefox. I can also easily reproduce this in master on my local machine.

This is caused by the code in app/assets/javascripts/initializers/initScrolling.js.erb#fetchNextPageIfNearBottom.

When the content in app/views/articles/tags/_sidebar_additional.html.erb exceeds a certain threshold, it impacts document.documentElement.scrollHeight and therefore the scroll calculation.

@rohitshetty , I have a working fix for this and would like to submit a PR this weekend if that's alright! Not sure if you were still looking into this.

[rohitshetty]

@colbymelvin Sure! I had guessed the problem to be in initScrolling too, but have been busy last few weeks with work and couldn't test it locally.
Thank you for the fix, please feel free to submit the PR :)

[jessleenyc]

Some more reports/info here: https://github.com/thepracticaldev/dev.to/issues/4242

[jessleenyc]

Also made a post about this: https://dev.to/jess/call-for-dev-contributors-posts-on-front-page-do-not-load-until-scrolled-down-5e6a

[rohitshetty]

Hey @colbymelvin are you still working on this?

[colbymelvin]

@rohitshetty @jessleenyc I submitted a PR for this here: https://github.com/thepracticaldev/dev.to/pull/4279

[rohitshetty]

@colbymelvin Awesome! Thank you

[kvharish]

I raised the same issue here 4314. I have closed it now. Good to see that it's fixed. Thanks, @colbymelvin.

[DonkeyKongJr]

I raised it as well in #4408 and closed it. Happy to see that there is already a PR @colbymelvin.
Thanks

[mike-healy]

If the PR happens to be unsuitable for whatever reason, could the articles not just be loaded on initial page load? Is there a benefit to waiting for a scroll action?

[colbymelvin]

@mike-healy I had the same thought. I do think it would make sense to fetch the first "page" of articles/videos/podcasts on initial page load, but felt more comfortable just fixing the existing scroll logic bug in #4279 .

I'm happy to make that change in the PR if the reviewer requests it, but maybe it makes more sense to submit an additional PR to refactor the fetching logic?