Skip to content
This repository has been archived by the owner on Oct 31, 2023. It is now read-only.

PageContent loading state #96

Merged
merged 1 commit into from
Feb 9, 2023
Merged

PageContent loading state #96

merged 1 commit into from
Feb 9, 2023

Conversation

dgalarza
Copy link
Contributor

@dgalarza dgalarza commented Feb 8, 2023

image

I think we can eventually make this even nicer and utilize React's <Suspense> but right now Apollo doesn't support it.

apollographql/apollo-client#10231

Copy link
Contributor

@acostanzo acostanzo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is cool! There also seems to be a decent path for abstraction if we need to leverage this loader shim pattern in other contexts than the whole page.

{children}
<Box
gridArea="content"
display={loading ? "grid" : "block"}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be:

Suggested change
display={loading ? "grid" : "block"}
display={loading ? "flex" : "block"}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both work, not sure if one is better than the other.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, turns out if I use display: flex then justify-self doesn't work on the box below.

Per MDN:

In flexbox layouts, this property is ignored. Read more about alignment in Flexbox.

@dgalarza dgalarza force-pushed the dg-page-loading-state branch from 830d0ac to 46d0f73 Compare February 9, 2023 18:16
@dgalarza dgalarza marked this pull request as ready for review February 9, 2023 18:16
@dgalarza dgalarza changed the title Loading POC PageContent loading state Feb 9, 2023
@dgalarza dgalarza force-pushed the dg-page-loading-state branch from 46d0f73 to 8d90947 Compare February 9, 2023 18:28
@dgalarza dgalarza force-pushed the dg-page-loading-state branch from 8d90947 to daa8600 Compare February 9, 2023 18:33
@dgalarza dgalarza merged commit 7dce715 into main Feb 9, 2023
@dgalarza dgalarza deleted the dg-page-loading-state branch February 9, 2023 18:54
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants