Loading tiles stuck on 30th item on Mobile

Environment

Discourse Version: v2.4.0.beta4 +105

Plugin Commit: ae52ff1

Other Plugins
HSP plugin
Landing Page

Steps to Reproduce

Go to a category using TLP tile view on chrome on mobile. It’ll get stuck on the 30th item and will take very very long until next load.

Example

Remember to check on chrome on mobile!

Logs

1 Like

You don’t need Chrome. The issue occurs in mobile Safari too if not as badly as description. But Javascript performance on Android is known to be not great.

However I’m not convinced this is a TLP bug.

Cannot reproduce on site with only TLP as plugin. It doesn’t occur on Reviews - Rideables for example. (Though admittedly that’s not got as many topics)

Also, as a quick check, what if Latest on HSP is turned into Tiles? Does that then exhibit the same problem?

What if you turn off Tiles for the Category? Does the problem go away? Can you turn off Ratings in that Category? What happens?

What happens when TLP is the only plugin on HSP? Can you demo that? What happens with all the plugins except Ratings?

It is possible there’s a beach of a non-functional browser performance threshold eg on number of nodes that is crippling performance and there is just too much going on; Ratings has some funky CSS styling to create the appropriate number of filled stars. Tiles has a lot of elements too. The clue is the fact that things end up getting done, it just takes a loooong time and there are no JavaScript errors (you did fix the outstanding one I hope?)

The solution may simply be to not use Tiles on mobile where there are so many other plugins enabled. It may be you can use it in a category, but not with Ratings.

1 Like

I’m going to take a look into this. I have a suspicion as to what’s going on.

2 Likes

There are three issues here. I’ve addressed 1 and 2 on HSP world, which should improve the loading of topics in the news feed.

  1. An exception was being thrown by some custom code in the “Default” theme Head Tag on hsp.world (the error @merefield pointed to: https://thepavilion.io/t/hsp-world-updates/1573/47?u=angus). @Eli Do we know who added this code? Perhaps Thomas? He needs to be careful when adding code as it can cause issues. It is a contributing factor here.

  2. @merefield As far as I can tell, it’s not necessary to apply the masonry library on mobile. The loading pattern of that library is partly contirbuting to the slowness of the load on mobile devices. I’ve prevented the masonry library from being applied on mobile on HSP, by modifying the topic-list component in a theme component and it seems to be loading a fair bit quicker:

    @on('didRender')
    completeRender(){
      if (this.get('tilesStyle') && !this.site.mobileView){
         Ember.run.scheduleOnce('afterRender', this, this.applyMasonry);
      };
    }
    

    Consider adopting that in the plugin master.

  3. The way Discourse determines when to load more topics is by using their custom “Eyeline” class, which makes some assumptions about the height of elements. Longer term, I think this may need to be tweaked for the Tiles TLP case: discourse/eyeline.js.es6 at master · discourse/discourse · GitHub

That’s not a bad idea. However if someone changes the CSS to allow two columns that won’t work. Also this issue was occurring with the alternative renderer which doesn’t use masonry.

1 Like

Yes you can see I’ve already been manipulating that recently for Activity enhancement. The height is taken from the provided selector. I don’t think this is the issue as things were concluding eventually it was just e x t r e m e l y slow

1 Like

I reckon it’s unlikely there’ll be a need for two columns on mobile devices. If we’re worried about tablets, we can always make a property mobile only. Perhaps we should prevent masonry from loading by default on mobile devices (excluding tablets), then if we find a need for two columns we can always make an exception for it.

Yeah there are multiple factors here. I think Eyeline is part of the delay though. The atBottom flag takes a few moments to fire in some circumstances with Tiles. I think this is a later thing, but ideally we should tell it it’s atBottom a few tiles before the bottom.

1 Like

Yep I defaulted tiles to one column fairly recently. Before it switched to two in landscape. But seriously who is going to want that? I never thought of switching masonry off but we can try that.

1 Like

That would be very nice, agree.

Yes it is suspicious. You are never sure if it’s firing or not.

@angus are you prototyping on here? The infinite scroll is cutting in every few records! Lol

@merefield On thepavilion.io? Nope.

Hmmm. Something is not quite right with the Topic Lists … !

I had previously tested on HSP with everything removed and the bug was still there.

Been trying to restore HSP data to my local environment but been running into bugs with the restore process. After our current staging site use is done (there’s stuff there for client review atm) will try to test there.

Not sure. Will check/warn about being careful.

Thank you for the updates @Eli. I’ll tag @beutelevision as he’s been working on the visual CSS for the home page and logged in page.

Good to know about the Admin Approval for new posts in the News Feed. We can look at this at a later date. Thank you :slight_smile:

If you didn’t remove the theme script that’s not everything

I did

You did? Ah ok. That wasn’t clearly communicated.

This is most strange though because there are countless installs of TLP and I’ve not previously had a single report of this.

What is different about HSP?

In my view this is NOT a bug. At most it may be a required optimisation for this single installation which will need to be considered for inclusion in scope of their project.

I temporarily removed every plugin except docker + TLP and set the theme to discourse’s default dark theme with no adjustments: HSP Products - HSP World and I’m still getting the same bug.

Do we know of some other instances using TLP in the same way (mobile tiles in a category with the standard renderer)?

(@raynedowell if you see this don’t panic! Stuff will be back to normal soon :slight_smile: )

Yes and I linked you several posts back!