Reduce uninitialised UI flashes and reflows

[jacksleight]

Related to my previous sidebar PR, this reduces uninitialised UI flashes and reflows on page load in a few other spots, to make things feel a little snappier and smoother. The goal is to make the initial render before JS initialisation as close as possible to how it looks after initialisation, within reason. The video below demonstrates what I'm referring to (after the changes is around the half-way point):

Screen.Recording.2022-02-07.at.17.37.24.mov

These pre-initialisation UI changes have been implemented:

• Table headers are visible (when applicable)
• Table filter button is visible (when applicable)
• Navigation close group button is hidden
• These fields have tweaked UI:
  • Textarea height is set correctly (when blank)
    • There's also a small bug fix to the scrollHeight calculation, which wasn't taking the border into account
  • File Upload height is set correctly (when blank and no custom ratio is set)
  • Multi Select field dropdown lists and loading icons are hidden
  • Tag dropdown lists and loading icons are hidden
  • Select loading icons are hidden
  • Rich Editor UI is visible
  • Markdown Editor UI is visible
  • Toggle UI is visible
• These fields have initial values/state set:
  • Checkbox
  • Checkbox List
  • Datetime
  • Markdown
  • Markdown Editor
  • Radio
  • Rich Editor
  • Select
  • Text
  • Textarea
  • Toggle

This won't be able to cover absolutely everything. Some things probably aren't worth the hassle of pre-rendering server side, like the initial value/state of a multi-select. And some things simply aren't known server side, like the scroll height of a textarea. But I think even just these changes make things feel much smoother.

[ryangjchandler]

Some minor things right now - general idea is good though. Let's see how far you can get with it, thanks @jacksleight!

[danharrin]

Also - are there unintended side effects of setting the initial value="" when using wire:model as well? For example, when dynamically creating instantiating half way through the LW lifecycle?

[jacksleight]

Great, I'll make those tweaks and continue with the remaining bits.

I'm not too sure about the empty value attributes, I've not (yet) spotted any issues... But I can change it to only output them if there's a value, just in case.

[jacksleight]

I think I’ve got this about as far as I can, shout if you spot anything I’ve missed.

These items are intentionally excluded, as implementing them reliably is probably more work than it’s worth, or just not possible:

• Textarea field height when a long value is set
• File Upload field UI and height when a value or custom ratio is set
• Multi Select field when a value is set
• Tags field when a value is set
• Key Value field when a value is set

There are a couple of things I’m a little unsure of that you may want to review:

• The value of a Date Time field does not always seem to match the format in $getFormat(), causing errors if you try to use that with createFromFormat, so I’m currently just relying on DateTime to figure out the format.
• I’ve set the initial min-height of the File Upload container to 76px, as this matches the initial render height of FilePond, preventing a height change and reflow when the field is blank. However I’m not exactly sure where this 76px comes from, it feels a bit arbitrary.
• Searchable select fields with a value set briefly flash the “Select an option” text during initialisation, I’m not quite sure on the best way to fix that.

[danharrin]

Thank you so much! These are great.