ResponsiveContext loading results in FOUC
See original GitHub issueExpected Behavior
Grommet provide API for listening to responsive context bootstrapping
Actual Behavior
Grommet responsive process is using medium
size by default, and it takes time for it to respond to actual screen size and re-render components which results in flashing
effect when grid may have 2 columns for a second or two and then it’s replaced with 1 column grid on small screen.
URL, screen shot, or Codepen exhibiting the issue
Open this on mobile: https://yay.tips
Steps to Reproduce
- Have a grid like following:
<ResponsiveContext.Consumer>
{size => {
const columns = {
small: '',
medium: ['1/2', '1/2'],
large: ['1/2', '1/2'],
}
return (
<Box pad={{ vertical: 'large' }}>
<Grid
align="start"
columns={columns[size]}
gap="large"
>
...
</Grid>
</Box>
)}}
</ResponsiveContext.Consumer>
- Open on mobile screen, instead of seeing 1 column as soon as page is loaded, you will see 2 columns grid for a second and only then 1
Your Environment
- Grommet version: 2
- Browser Name and version: any
- Operating System and version (desktop or mobile): any
Issue Analytics
- State:
- Created 4 years ago
- Comments:15 (3 by maintainers)
Top Results From Across the Web
Responsive Context - Grommet
Responsive Context. a means of providing different rendering behavior based on the viewport size. small. 1. 2. 3. 4. 5. 6. 7. 8....
Read more >Towards Responsive Context-Aware Environments
First results indicate that the scheduler improves the miss ratio on a smart space prototype by approximately half. 1 Introduction.
Read more >Whats New - HPE Design System
Track HPE Design System announcements, new template patterns, guidance, and released components.
Read more >FAQ | Galleria 1.6 documentation
Ge focus on mobile compatibility in a responsive context, meaning that the Galleria ... How do i load an external JSON File with...
Read more >Understanding and Manually Improving SVG Optimization
Alter that system, get different results. ... precision combination yields the smallest file size, focus on the leaps in decimal precision.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I have used Grommet fairly heavy on few Gatsby projects now. I have almost decided switch from Grommet to Theme-UI/Rebass because of how those libraries handle responsive vs Grommet. The main reason is not the API, but the use of media queries for responsive styles in those libraries. Grommets responsive context is useless for Gatsby SSR builds, because of the before mentioned unknown viewport at SSR. (Grommet defaults to tablet) .
The use cases I’ve ran into with this is where, the layout is different for mobile vs desktop. Like hiding things on mobile, reorienting the layout on desktop/mobile, or a mobile vs desktop nav bar. For example a mobile nav vs desktop. Currently with Grommet and ResponsiveContext, on mobile the desktop nav will flash for a second until Grommet mounts and updates the ResponsiveContext based off the current viewport. (it is previously set to medium during ssr).
@oorestisime Your utility prop example uses ResponsiveContext which wouldn’t help the problem with the SSR on gatsby. It needs to be based off of media queries.
Some current work arounds:
Emotion’s facepaint -> You could add a facepaint instance on the theme that was configured to the breakpoints or use a hook. React Media
I like the facepaint API a bit better, IMO.
I have also built my own HOC that would wrap a Grommet component and add a mediaQuery prop, to add styles. I did this before I found out about facepaint…
Code Sanbox - withMediaQuery demo
Some other Wishes:
<Box width={{ _: 1, sm: 1, md: 1 / 2, lg: 1 / 4 }} />
. I’ve had issues with grommet width, it doesn’t let you dowidth: 90%; max-width: 500px;
.Hi,
thanks for taking the time to write this and being patient with us! You provided really nice examples and i agree that grommet should provide a way of embedding those media queries in the component.
To answer your points:
I am not entirely sure there is point in adding such prop in every component, I can see why it is helpful in a Box but heading paragraph button etc i think not. In those components your solution is probably to alter some font size margin padding rather than completly hiding it
i.e instead of doing
it would be something like
<Text size={["small", "large"]}
. Those could also be with media queries.I could see great value for this for margin, padding, size already and probably into some other props. What’s nice with this is we could do it as in incremental approach keeping backwards compatibility. If user provides single value or object then we do this as now otherwise we provide breakpoints for it.
The only downside with this is that grommet kind of does a few things for responsive text already such as reducing the fontsize based on a breakpoint etc. Not sure how this would work with it but worth exploring.
I am interesting in taking a go at this and exploring some solutions. @ShimiSun @ericsoderberghp thoughts?