[web] Introduce Loading component to web
ClosedPublic
Actions

Authored by ashoat on Dec 21 2022, 8:21 PM.

Details

Reviewers

ginsu
michal
atul
tomek

Commits

rCOMMfd54f206c2dc: [web] Introduce Loading component to web

Summary

Designs are from DES-8; see Figma animation here. This is the first step to fixing SSR on web... basically we need to align keyserver/web on some loading HTML.

This can be used in other places, but for now I'm introducing it to use while redux-persist is loading.

In a subsequent diff, I'll pass it down via SSR.

Test Plan

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ashoat created this revision.Dec 21 2022, 8:21 PM

ashoat added a child revision: D5982: [keyserver] Fix JSONStream types.

Harbormaster completed remote builds in B14651: Diff 19987.Dec 21 2022, 8:35 PM

ashoat requested review of this revision.Dec 21 2022, 8:35 PM

ashoat added a child revision: D5983: [web] Only render Loading component in SSR.Dec 21 2022, 8:41 PM

ashoat removed a child revision: D5982: [keyserver] Fix JSONStream types.

ashoat edited the summary of this revision. (Show Details)Dec 21 2022, 8:44 PM

ashoat edited the test plan for this revision. (Show Details)

tomek accepted this revision.Dec 22 2022, 8:09 AM

tomek added inline comments.

web/loading.css
27 ↗	(On Diff #19987)	Ideally we should use a constant from our theme. There's no such color, but maybe we should at least include a new var for it?
28–29 ↗	(On Diff #19987)	Why do we need to set these while using `flex`?
35 ↗	(On Diff #19987)	This can be simplified
56 ↗	(On Diff #19987)
web/loading.react.js
13 ↗	(On Diff #19987)

This revision is now accepted and ready to land.Dec 22 2022, 8:09 AM

ginsu accepted this revision.Dec 22 2022, 10:04 AM

ginsu added inline comments.Dec 22 2022, 10:08 AM

web/loading.css
17 ↗	(On Diff #19987)	`#00000040` this is the hex value for that rgba if we want to be more consistent
48 ↗	(On Diff #19987)	`#ffffff26` this is the hex value for that rgba if we want to be more consistent

michal accepted this revision.Dec 22 2022, 10:23 AM

ashoat added inline comments.Dec 22 2022, 5:44 PM

web/loading.css
28–29 ↗	(On Diff #19987)	`width: 100%` is actually unnecessary, but I can find any way to replace `height: 100%` with any combination of `flex`, `flex-grow`, `justify-content`, or `align-items`. I'm not a `flex` expert but need to get this thing landed today, if you have any suggestions on how to solve it let me know and I can make a follow-up diff/task