Reduce sidebar content flashes/flickering

[fregante]

What does this PR do?

For anything that takes less than 1 second to load, it is distracting to use a looped animation, because users cannot keep up with what happened and might feel anxious about whatever flashed on the screen.

From https://www.nngroup.com/articles/progress-indicators/

• Avoids flashing of content (I think Corinne mentioned this before too)
• Postpones the loading animation so it's never shown if the loading is nearly instant
• Smoothens the loading animation(s) (fade, scale, brand color instead of hard black)
• Slides the sidebar in instead of making it jump in (not the site though, which wouldn't be performant)
• There are a couple more small improvements to be made probably

Discussion

Some effects could be subjective, but overall I think this improves the user experience making the extension slightly less harsh.

Note: These animations don't slow the user down because they happen when the user is already waiting.

Demo

https://user-images.githubusercontent.com/1402241/197283468-6930c171-b14a-4b14-b3b8-04c41898e3ae.mov

Checklist

• [ ] Add tests
• [x] Run Storybook and manually confirm that all stories are working
• [x] Designate a primary reviewer: @BLoe

Related (all about flickering)

• https://github.com/pixiebrix/pixiebrix-extension/issues/4317
• https://github.com/pixiebrix/pixiebrix-extension/issues/2657
• https://github.com/pixiebrix/pixiebrix-extension/issues/4405
• https://github.com/pixiebrix/pixiebrix-extension/pull/3612

[codecov[bot]]

Codecov Report

Merging #4523 (e7c2d55) into main (f503b3a) will increase coverage by 0.01%. The diff coverage is 92.30%.

@@            Coverage Diff             @@
##             main    #4523      +/-   ##
==========================================
+ Coverage   50.44%   50.45%   +0.01%     
==========================================
  Files         912      913       +1     
  Lines       26929    26939      +10     
  Branches     5461     5462       +1     
==========================================
+ Hits        13583    13592       +9     
- Misses      12412    12413       +1     
  Partials      934      934              

Impacted Files	Coverage Δ
src/blocks/readers/SelectionReader.ts	0.00% <ø> (ø)
src/contentScript/sidebarDomControllerLite.ts	19.04% <0.00%> (-0.47%)	:arrow_down:
src/components/DelayedRender.tsx	100.00% <100.00%> (ø)
src/components/Loader.tsx	100.00% <100.00%> (ø)
src/sidebar/ConnectedSidebar.tsx	70.27% <100.00%> (+0.82%)	:arrow_up:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.