Component Flashes on Screen

[leadhkr]

I've tried out your library for a react project of mine and it seems to work with the breakpoints, however, regardless of the width, the components will always flash on the screen then disappear. For example:

        <Breakpoint xlarge up>
          <SearchBar />
        </Breakpoint>

For the above code, I want the search bar to render only for screens larger than xlarge. When the screen size is small (mobile), the SearchBar flashes on the screen then disappears. Which tells me that, while the library is adhering to the screen sizes, it is still rendering the component and then unmounting it.

Is there a fix for this?

[flexdinesh]

@sagarpatel8384 Can you add more info about the project in which you are using this lib?

This might happen if you're server rendering your React code. The lib has to have a default for Server Render when there are no event listeners (server side). Right now, XL is the default if there is no event listener (server render).

Maybe we can build an option to configure default for server render so folks can use a different default for different server renders (ex. m.site.com can use mobile as default and site.com can use desktop as default).

Pl add more info on the code where this lib is used and we'll see if it is a code issue or a known SSR problem.

[thedern]

We have the same flicker/flashing issue as we are attempting to use this package with Next.js

[flexdinesh]

This is definitely default desktop fallback for SSR. I'll try to wrap something that makes the default configurable (desktop/mobile/nothing).

[twhite96]

This is still an issue. I'll try to take a look to see if I can help out.

[flexdinesh]

A potential work around for this is to use the setDefaultWidth API merged in #44 and published in version 2.2.0.