Fix flashing wrong layout on init

Author: lukaw3d

.changelog/2188.bugfix.md

@@ -0,0 +1 @@
+Fix flashing wrong layout on init

src/app/index.tsx

@@ -27,8 +27,16 @@ import { IonicNativePlatformProvider } from './components/Ionic/components/Ionic
 export function App() {
   useRouteRedirects()
   const { i18n } = useTranslation()
+  const [isResponsiveContextInitialized, setIsResponsiveContextInitialized] = React.useState(false)
   const isMobile = useContext(ResponsiveContext) === 'small'
 
+  React.useEffect(() => {
+    // TODO: remove this if grommet fixes and runs this on useLayoutEffect
+    // https://github.com/grommet/grommet/blob/9d3a8e4/src/js/components/Grommet/Grommet.js#L109-L111
+    setIsResponsiveContextInitialized(true)
+  }, [])
+
+  if (!isResponsiveContextInitialized) return null
   return (
     <FatalErrorHandler>
       <IonicNativePlatformProvider>