search

posit-dev / publisher

MIT License
3 stars 0 forks source link

nit: "keyboard_arrow_down" text is shown when network is slow #320

Open kgartland-rstudio opened 9 months ago

kgartland-rstudio commented 9 months ago

When I throttle down my network speed to "Slow 3G" in Chrome and load the UI, I get overlay text saying "keyboard_arrow_down" before the arrows load.

keyboard

Screenshot, in case you don't want to watch the video: Screenshot 2023-10-26 at 3 44 23 PM

dotNomad commented 9 months ago

The keyboard down arrow icon is setup by Quasar in its QExpansionItem component. It is a Material Icon font icon and that is loaded in like this:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/node_modules/@quasar/extras/material-icons/web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format('woff2'), url('/node_modules/@quasar/extras/material-icons/web-font/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff') format('woff');
}

Specifically look at font-display: block;. That blocks display of the font until it is loaded in, or 2-3 seconds whichever comes first. There isn't really a way without some trickery to fully block the UI from loading the text before the font is loaded.

The other option is to use the props for QExpansionItem to set our own icon. It allows for a string, which is still using an icon library font, or an img with the img: prefix. It does look like there may be support for SVG symbols which would allow us to put the symbol directly into the DOM and not require any async loading at all. This would mean we would have to be sure to replace every icon ever used in Quasar defaults though - which is very frustrating, but that is the downside of using font icon libraries.

References: https://web.dev/articles/font-best-practices

dotNomad commented 9 months ago

This was deemed pretty low priority since it requires a pretty slow internet connection.