ResponsiveContext loading results in FOUC

Expected 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

1. 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>

1. 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

[justdanallen]

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:

• I really like the styled-system theme API for responsive (Theme-ui/Rebass/Chakra are based of styled-system). You can do an array [] or {}. It’s well thought out and at least worth reading. Also note, the object lets you define a default <Box width={{ _: 1, sm: 1, md: 1 / 2, lg: 1 / 4 }} />. I’ve had issues with grommet width, it doesn’t let you do width: 90%; max-width: 500px;.
• I also like the shorthands for css properties with a top, right, bottom, left. Ex: margin-left = ml <Box ml="small" />.

[oorestisime]

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:

1. this is already possible, they are in the theme. unless i didn’t understand what you meant.
2. This could be a nice utility prop. It would avoid a lot of userland code doing

const size = useContext(ResponsiveContext)
if (size === "small") {
return A
}else if (size === "medium") {
 return B
} else {
return C
}

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

1. Have been working with styled-system a few weeks now and i must say the array approach for responsive work very very good. i think it could be of great value for users if they could provide arrays for some props that behave based on the responsive breakpoints

i.e instead of doing

const size = useContext(ResponsiveContext)
return <Text size={size === "small" ? "small" : "large"} /> 

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?