feat: add dark splash screen, ref #4398 #4935
Conversation
alter-eggo
force-pushed
the
feat/splash-screen2
branch
from
4e8723b to
cd23acc
Compare
| width="100%" | ||
| mx={['', 'space.04']} | ||
| animation="fadein" | ||
| animationDuration="500ms" |
There was a problem hiding this comment.
While reviewing I was wondering wether we could use a combination of animationDelay and animationDuration so that we can make the fade feel a bit snappier (feels faster / more "performant") while still ensuring all elements are loaded in place to avoid a jumpy UI. However, the delay doesn't seem to work / affect the animation, not sure why. This is already really nice btw and def. an improvement which I think is shippable, just wondering
There was a problem hiding this comment.
I feel like animation duration won't work here. to avoid this jumpy UI we prob need to show some loader/splash screen until page is full rendered https://stackoverflow.com/questions/40987309/react-display-loading-screen-while-dom-is-rendering
There was a problem hiding this comment.
If the loading time is very short (I'd say anything below ~1s) we could get away with just leaving the screen blank and then fade the content in. IMO we should only show a loading screen if we anticipate things taking 1s+, otherwise you end up with an experience where you briefly see a loading spinner flashing and then directly transitioning into something else which doesn't feel great.
alter-eggo
force-pushed
the
feat/splash-screen2
branch
from
cd23acc to
777a808
Compare
public/html/popup.html
Outdated
| @@ -1,12 +1,13 @@ | |||
| <!doctype html> | |||
| <html class="mode__popup light"> | |||
| <html class="mode__popup light splash-screen"> | |||
There was a problem hiding this comment.
We already have a class added light or dark, maybe we can do this all with just CSS?
So if the class is dark set the background-color: #12100F?
There was a problem hiding this comment.
I thought on this and decided to completely remove this class, and instead of this add absolute splash-screen div
src/app/common/theme-provider.tsx
Outdated
| @@ -48,10 +50,26 @@ function setUserSelectedTheme(theme: UserSelectedTheme) { | |||
| interface ThemeSwitcherProviderProps { | |||
| children: React.JSX.Element | React.JSX.Element[]; | |||
| } | |||
|
|
|||
| function removeDefaultBg() { | |||
There was a problem hiding this comment.
If we set the BG color in bases.css do we then need to remove it? We can have another BG colour on top of it then in the react components? 🤔
There was a problem hiding this comment.
I added this class with "!important" color to avoid flashing colors on splash screen
alter-eggo
force-pushed
the
feat/splash-screen2
branch
from
777a808 to
613fc9d
Compare
alter-eggo
force-pushed
the
feat/splash-screen2
branch
from
613fc9d to
9af2812
Compare
alter-eggo
force-pushed
the
feat/splash-screen2
branch
from
9af2812 to
2097af3
Compare
Screen.Recording.2024-02-11.at.00.29.10.mov