Open kgartland-rstudio opened 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
This was deemed pretty low priority since it requires a pretty slow internet connection.
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.
Screenshot, in case you don't want to watch the video:![Screenshot 2023-10-26 at 3 44 23 PM](https://github.com/rstudio/publishing-client/assets/41300090/7fbbfc75-8128-4aae-ba29-adc7a5edc25d)