<Hidden> broken with SSR - DashboardLayout Screens+

[miles-118]

Description

On first page load with <Hidden from="md"> and <Hidden till="md"> the till="md" loads first on large web pages with SSR.

CodeSandbox/Snack link

https://github.com/miles-118/ssr-issue-example

Steps to reproduce

1. Clone the repo: https://github.com/miles-118/ssr-issue-example
2. Run yarn on the root directory.
3. Then run yarn web on the root directory.
4. Open http://localhost:3000/ in your browser
5. Move the page around
6. Reload the page
7. See SSR issues
8. Go to http://localhost:3000/user/NativeBase in your browser
9. Click "Go Back"
10. See Working Page
11. Reload the page
12. See SSR issues

NativeBase Version

3.4.9

Platform

• [ ] Android
• [ ] CRA
• [ ] Expo
• [ ] iOS
• [X] Next

Other Platform

No response

Additional Information

When you load the page for the first time, <Hidden till="md"> is ignored on a large web browser as the width is 0, and <Hidden from="md"> loads even with isSSR={true}.

The DashboardLayout in Screens+ has this issue.

On first page load in a browser with a large screen

   ```

```

the Mobileheader loads first and does not change as the page loads. This causes the header at the top to be white.

https://user-images.githubusercontent.com/107222578/179380198-39948357-6379-446e-bf19-8af749fc2248.mp4

[Krithikj20]

Hi @miles-118, Thank you for reporting this issue. We will try to fix it at the earliest.