Loading Animation on channel file list blocks user input

[novacrazy]

Description:

For a channel with many files, enough that they would need pagination/load more button, it appears that the loading animation simply doesn't go away, making it impossible to browse the file list. Not even the close button is functional during this.

If I edit it with the browser dev tools to delete the loading modal thing, it's perfectly functional and shows everything had indeed been loaded. Had a user encounter this same thing on his mobile phone browser, too.

Expected behavior:

For the loading animation to go away after a few seconds at most.

Actual behavior:

It hangs and due to it being opaque to clicks, blocks usage of the entire sidebar.

Server Setup Information:

• Version of Rocket.Chat Server: 1.3.0-develop (latest as of a few days ago), still on 1.2.0-develop according to the version, but it was after the 1.2.0 release
• Operating System: Ubuntu Server
• Deployment Method: Docker
• Number of Running Instances: 1
• DB Replicaset Oplog:
• NodeJS Version: 8.15.1
• MongoDB Version: 4.0.3

[novacrazy]

The user who experienced this on mobile said this in our issues channel:

“I'm gonna assume that this is a known issue with the current Rocket version, but I'm getting strange behavior on Firefox Mobile (Android)

Opening the files list causes the page to become unresponsive. After refreshing, Rocket refuses to load. On top of that, if I go to a site where I'm normally signed in to some account, I end up signed out and get errors when I try to sign back in.

Clearing cache and cookies fixes it, as well as force-closing Firefox.“

[novacrazy]

Okay, more users are complaining about this, so I guess I'll just edit out that bit of markup myself.

[wreiske]

I can confirm this is an issue. The pull-request to fix this should also include a unit test to make sure the files are clickable.

[reshadman]

Anybody having this issue and wants a quick solution just put the following in Administration -> Layout -> Custom CSS:

ul.attachments + .load-more {
    display:none !important;
}