Implement skeleton loader (forms, query builder, attachment)

[CarolineDenis]

Fixes #2998

[CarolineDenis]

To test:
=> Change in the dev tool network tab: 'No throttling' to 'Slow 3G'

• Open Query Builder, while loading, the skeleton should be displayed
• Open a record set that contains attachments, click on attachment button icon, while attachment is loading the skeleton should be displayed.
• Open attachment page and see skeleton while attachments are loading
• Open an App Resource and while loading on the right, see skeleton

PS: If 3G not slow enough, you will have to pull the branch and replace the expected data by a temporary hardcoded 'undefined'.

*Can also test that animations are disabled for the skeletons when user choose no animation in his preferences

[CarolineDenis]

Preview of a skeleton:

form.mov

[maxpatiiuk]

looks very nice in the UI
code could use some improvement though

[grantfitzsimmons]

The skeleton is too stark in contrast to the background (black with a while gradient), needs to be something more like this:

Than this:

Also it is used in place of the loading indicator when the loading circle should still be used after attachments begin to display.

Full video:
https://user-images.githubusercontent.com/37256050/231314507-d62041a1-d632-4f04-8962-fd69fa7eab99.mp4

[grantfitzsimmons]

It would be very nice to have skeleton loading dialogs instead. Forms generally do not have any loading time & some of the components that take a long time to load are:

• The list of queries
• The list of record sets
• Creating an interaction

[grantfitzsimmons]

Similar to my last feedback, this looks really odd with the black outline & makes the dialog massive when it should be very small

[grantfitzsimmons]

See how this loads into a giant dialog that includes a loading wheel (not needed) then shrinks back to a small window upon completion? When things load quickly, this flashes by and looks bad

Screen.Recording.2023-04-11.at.7.13.10.PM.mov

[CarolineDenis]

@grantfitzsimmons can you check this version for the previous components and send me your thoughts?

[grantfitzsimmons]

https://coldfish-issue-2998.test.specifysystems.org/specify/

Open the queries dialog and see that it appears very condensed

[grantfitzsimmons]

https://coldfish-issue-2998.test.specifysystems.org/specify/tree/taxon/?conformation=%7E%7E1%7E18940%7E18961-%7E18963-%7E18960----

There is also an issue with the form skeleton repeating and looking very odd

[grantfitzsimmons]

You likely resized it like that intentionally or accidentally

If this is the case, then it would be claned when you wipe your localStorage or use incognito

No way! I refuse to believe it.

[maxpatiiuk]

lots of small suggestions, nothing major

[maxpatiiuk]

All looks good and I will approve this pull request as soon as https://github.com/specify/specify7/pull/3334/files#r1173934603 is fixed. Tell me if you want to meet to talk about that

[CarolineDenis]

All looks good and I will approve this pull request as soon as https://github.com/specify/specify7/pull/3334/files#r1173934603 is fixed. Tell me if you want to meet to talk about that

yes would be nice

[CarolineDenis]

All looks good and I will approve this pull request as soon as https://github.com/specify/specify7/pull/3334/files#r1173934603 is fixed. Tell me if you want to meet to talk about that

Added the aria prop to Skeleton.Root

[maxpatiiuk]

There are still two unresolved comments. Besides those all looks good

[grantfitzsimmons]

Almost ready!

Just one more thing, the form dialog is really wide by default, can we made this narrower initially?

Screen.Recording.2023-05-04.at.8.27.46.AM.mov

[CarolineDenis]

@grantfitzsimmons could you test this PR this week please?