/apps Page Images are slow to load

[armaanahluwalia]

There are a couple of bugs on the /apps page of the website.

1. When we click any of the different platforms except for the default ( macOS ), the images are slow to load and take around a half second after clicking to actually load the correct image. Specifically the android image for some reason takes longer and seems to load another image before loading the correct one.

2. The buttons do not have an enabled states. Its a bit confusing to know that this is indeed a clickable tab menu from UX perspective. The buttons should have enabled states.

[akashnimare]

The buttons do not have an enabled states. Its a bit confusing to know that this is indeed a clickable tab menu from UX perspective. The buttons should have enabled states.

Agreed on this. We could use the same button styling which we're using on /plans page -

(^^ this looks more polished I think)
cc @rishig.

[rishig]

good catch!

[timabbott]

@akashnimare sounds good re: buttons. Want to submit a quick PR for that, and then we can look at redoing the app screenshots as a follow-up (that probably involves more discussion).

[akashnimare]

Cool, will submit the PR for the same. Rishi and I have almost finished the work on the screenshots, it just needs some finishing.

[armaanahluwalia]

@timabbott I think this was incorrectly closed. I was actually talking about the tab menu below the featured app image splash. See attached screenshot.

[armaanahluwalia]

Those don't have enabled states so its difficult to even realized they're clickable. The other issue of the images taking too long to load was also not addressed ( Not sure if another issue was opened for that ).

[timabbott]

Yeah, I think this is a classic case of #10133 having been mis-tagged as fixing this issue; its commit message should have said "Fixes part of #10104". @akashnimare FYI, reopening.

[akashnimare]

@armaanahluwalia It's always a good idea to post the screenshots etc in the issue description to make the issue crystal clear. This is what I always do to avoid any confusions :) If you go on the /apps page there is only one button which is the download button. That button didn't have the enabled state so the changes I have made are still relevant.

I was actually talking about the tab menu below the featured app image splash. See attached screenshot.

Did you notice the background and opacity change when you hover over the OS icons?

Normal state:

---

On Hover:

The other issue of the images taking too long to load was also not addressed

We are loading the images using the JS so depending on your internet it may take few secs to load but I agree that we could better here.

its commit message should have said "Fixes part of #10104".

@timabbott my bad, I was bit confused about what to use in the commit message. I checked old commit messages and found out that others have used things like "Partially fixes #issue" to indicate that the issue only fixes a part and not the full issue hense I have used the same thing in commit message.

This PR updates the styling of download button so
that it matches with the other buttons on portico pages.
Partially fixes #10104.

[armaanahluwalia]

@akashnimare Thanks for the feedback. I'll try to communicate better going forward. I actually did notice the hover state but I'm referring specifically to the fact that the hover state is not 'enabled' by default on the first option. This is pretty standard when designing any kind of buttons. The one thats selected has an 'enabled' state different from their default 'unselected' state. This is especially useful in a tab menu that blends into the page as it does here so people know that they can click on it without having to move their mouse and happen to hover over the icons to discover this.

Regarding the images I think we have 2 options here –

1. Preload all images onto the page using a preloader ( many available online )
2. Optimize images to load faster

[armaanahluwalia]

We also haven't addressed the bug that there is a flash of another image ( or different sized image ) before loading the android tab. So when you click the android button, you see the image change and THEN load the android image.

EDIT: I just tested and this is not limited to android. It happens and gets worse when you click around the other buttons in random order.

[armaanahluwalia]

[akashnimare]

So if a user is on /apps/mac page, the macOS tab icon should be enabled, right (same as what we see when you hover on the icon)?

[armaanahluwalia]

I would say yes. Since we don't have a design for an enabled state we could use the hover state styles. Better than nothing IMO.

[zulipbot]

Hello @zulip/server-misc members, this issue was labeled with the "area: portico" label, so you may want to check it out!