Some sort of "loading state" when applying filters

[AdrianBZG]

Originally from @yochannah :

"When I run a chromosome search, it takes several seconds before the im-tables loader bar appears, during which time I find myself wondering if I actually pressed the Go! button at all. Is there a way to make the im-tables loading bar load earlier, or some other way to indicate to the user that the browser is thinking?"

[Zemotacqy]

Hi @AdrianBZG I think I can solve this issue. Please assign this issue to me
In which file I should change the css? (src/css/hmb-style-main.css or public/stylesheets/data-browser-main.css)
I am thinking of putting a custom loader instead of rendering the progress-bar early because the progress-bar seems to be a part of Bootstrap4 and changing its timing will change the rendering.

[AdrianBZG]

Hi @Zemotacqy , let me illustrate a bit what the issue is about, just to make sure we are on the same line 😄. When a user applies one of the filters (left sidebar) that entails a lot of constraints on the im-table, it takes some time to load, going from milliseconds to seconds depending on the amount of constraint already existing in the im-table.

The problem is that there is no message or loading notification apart from the im-table progress bar, which is not sufficient to let the user know that he has actually correctly filtered the table but should wait a bit for the system to apply the filters.

As an example, go to the InterMine browser deployment (http://data-browser.apps.intermine.org/), choose the HumanMine mine in the selector, and filter using the ClinVar filter with Pathogenic significance and insertion Type. You will see that it takes some time to load.

Thus, the idea is to add some kind of loading animation in the middle of the screen when the user applies a filter, and remove this animation once the table has loaded, which triggers the onRendered event, e.g.: https://github.com/intermine/InterMine-Data-Browser-Tool/blob/master/src/js/main-view.js#L49

About the question on where to edit the styles, it should be done in src/css/hmb-style-main.css, as this is the source code, whereas the /public folder is the one where all files are placed automatically by gulp to be used in production. Any change done in /public, will actually be deleted by the gulp task, as it will replace them with the files (and compiled files, as is the case of the SCSS ones: https://github.com/intermine/InterMine-Data-Browser-Tool/blob/master/src/scss/) from the /src folder.

Any doubt, please ask 😄

[Zemotacqy]

Thanks @AdrianBZG Its very helpful. I am working on it.

[VarunBhandia]

@AdrianBZG I want to contribute. Should I implement a percentage loader to improve UX?

[AdrianBZG]

@VarunBhandia It could be interesting to have a percentage loader, but how are you going to measure how much % has already been loaded?

[VarunBhandia]

Yes, @AdrianBZG sir, there will be an issue in measuring how much % has already been loaded. We can try a JOIN and instead of getting all the info we can count the number of rows. If the user selects one select box the other select box will be according to the first such common rows is more than 0.
Will this solution will work?

[VarunBhandia]

@AdrianBZG please sir tell me if the above solution can work?

[AdrianBZG]

@VarunBhandia I'm not sure about what you mean with measuring the number of rows. The idea is to show a loading animation in the middle of the screen when some filter is applied to the table (filters at the sidebar), so that the user knows that information is loading, instead of keeping the user wondering whether it has actually clicked any filter or not.

Does it make sense?

[AdrianBZG]

@VarunBhandia

PS: See #26 for illustration of what we are trying to achieve with this issue.

[dmahajan980]

Hi @AdrianBZG! I would like to work on this issue.

[AdrianBZG]

Hi @dmahajan980 !

Sure. The idea is to show some kind of "loading bar" or something similar when a filter (or filters) are being applied to the im-table.

Basically, when the table is in the "Loading Table..." state (click in a Organism filter for instance to see that), we also want to show a "loading" icon or something on the screen, so that the user doesn't go and click everywhere before waiting for the table to load, as that could generate issues.