Feature/lazy loading

[Huongg]

Description

Fixes #1005

Development notes

I've created 2 loaders components for both meta-data and tracking-data.

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[comym]

hi @Huongg just had a look at it now

It was actually hard to keep the lazy loading running for long to observe it in detail even when switching to a slow 3g connection.

It looks alright to me and my two comments are:

We should try to make a better alignment/positioning of the rectangles to align as perfect as possible to the text data positioning when it appears.

The screenshot below shows the two overlayed. You can see they are not aligned and what happens is when we suddenly move from rectangles to text, there's a jump in positioning. Basically, the expectation of something appearing at a certain position is not matched and there's the impression that the content is moving. I'm aware the rectangles are just a representation of possible content with lines and spacing in between and might never match it perfectly depending on the data we're loading. However, especially the vertical alignment of the columns is important for us to nail.

Have a look:

Lastly, the colours of the pulsating rectangle are alright, however the fact that it's visible every time you click on a run for a split second makes everything in my opinion annoyingly jumpy. Cause it ends up not being something that only occasionally happens, but it happens every time. The only time that it does not happen is when you go back to a run that you actually loaded previously because it's already loaded.

I thought making the lazy loading rectangles have a more subtle colour would help at minimizing this effect and make everything look less jumpy, but I don't think it worked. We can keep the colours as it is for now. I do think it's better though. The contrast between background and foreground is less now and better for the eyes.

I don't know how to proceed from here. If going back to the idea that @tynandebold mentioned before, of creating some sort of delay - in a less hacky way - so users don't see the lazy loading appearing every single time you click on something, but only when is really necessary.

Technically, I leave it to you guys, but that would be the way to go in my opinion. Let's keep the conversation going and I'm happy to hear from the team what the best solution could be. Thanks!

[rashidakanchwala]

Looks great, i can see the alignment is correct in comparison mode. thanks @Huongg

[tynandebold]

This is looking great and really brings the feel of the app up to a new level!

I'm going to request changes instead of approving just because of the number of comments I have. None of them are major though, so they should be able to be remedied without much effort.

A few other points I noticed while testing:

1. At one point I saw the tracking data loader rows were very short:
   
2. In comparison mode, the metadata and tracking data aren't lining up. Maybe this is still a WIP?
   
3. The colors of the light theme have very subtle and for me a hard-to-see contrast. Should we tweak that?
4. I would speed up the animation. Maybe just use the default value, which is think is 1.2, unless design has specifically asked for this :)

[Huongg]

3. The colors of the light theme have very subtle and for me a hard-to-see contrast

Hiya, thanks for your comments. For points 1 and 2, I didn't push my the latest last night so what you saw was prob the older version, sorry. I've asked Gabriel about the colour you mentioned in point 3, happy to tweak it. And I also remove the speed to set it back to the default value.

For other comments, I've addressed them and left some comments with my changes 😄

[tynandebold]

Fantastic work! Thank you for making the changes.

[Huongg]

thank you @tynandebold.

@comym just reminded me about removing the sliding effect in the comparison view...I completely forgot we agreed we would do that. I've removed the sliding in effect to make it work nicer with the lazy loading now.

[tynandebold]

thank you @tynandebold.

@comym just reminded me about removing the sliding effect in the comparison view...I completely forgot we agreed we would do that. I've removed the sliding in effect to make it work nicer with the lazy loading now.

I actually think we should keep the sliding effect. Given that it's a safe bet the user is very rarely going to see the loading components, don't we still want the new data to slide in when it appears?

In those rare instances when something is taking ages to load, yes the user will see the loading indicators and then the data will slide in, but that will be a very small percentage of total views. Again, the majority of the time we won't see the loading indicators, and if we don't see them and then we remove the slide in, we lose that lovely animation and moment of delight.

[cvetankanechevska]

Looks great to me and I agree with Tynan of having the slide in animation.

[comym]

Hi, I've just checked it with the increased delay time and the sliding effect added back

Let's keep the sliding effect, as it is. Let's keep it.

However I still see the header and content columns moving up and down as described here
#1005 (comment)

Pretty much there
That's all for now, many thanks

[Huongg]

awesome thank you @comym @cvetankanechevska @rashidakanchwala and @tynandebold. Lets keep the sliding in effect then. I've updated the delay timing to 200ms so the gitpod looks in sync with our local version, but also not too slow for data to load

For your feedback about the layout shifting @comym, thanks for noticing it. My latest changes should address them now. You can now review again on the gitpod 😄

[cvetankanechevska]

Just one small adjustment, is this formatted with prettier? If so I think all color values will be lower cases.

[Huongg]

ah yeah thanks for spotting it, im meant to update with your colour variables but completely forgot again.

[cvetankanechevska]

awesome thank you @comym @cvetankanechevska @rashidakanchwala and @tynandebold. Lets keep the sliding in effect then. I've updated the delay timing to 200ms so the gitpod looks in sync with our local version, but also not too slow for data to load

For your feedback about the layout shifting @comym, thanks for noticing it. My latest changes should address them now. You can now review again on the gitpod 😄

Great work Huong! 🎉

[comym]

Hi @Huongg looks and feels great. I'm approving it.

As the last thing, I just realised that we were not using our current colour palette for the lazy loading gradient colours.

Please make sure to follow:

Dark theme:
Start: Slate-600
End: Slate-200

Light theme:
Start: Grey-200
End: Grey-100

Many thanks :)