From 6f01d6799187dfe5805857d69894b0a4ceecc27c Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Sun, 25 May 2025 02:38:56 +0200 Subject: [PATCH 1/2] Fix flashing wrong layout on init --- .changelog/2188.bugfix.md | 1 + src/app/index.tsx | 11 +++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 .changelog/2188.bugfix.md diff --git a/.changelog/2188.bugfix.md b/.changelog/2188.bugfix.md new file mode 100644 index 0000000000..694f6323f7 --- /dev/null +++ b/.changelog/2188.bugfix.md @@ -0,0 +1 @@ +Fix flashing wrong layout on init diff --git a/src/app/index.tsx b/src/app/index.tsx index 2af1e7026c..eb129296da 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -8,8 +8,7 @@ import { Box } from 'grommet/es6/components/Box' import { Main } from 'grommet/es6/components/Main' import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext' -import * as React from 'react' -import { useContext } from 'react' +import { useContext, useEffect, useState } from 'react' import { Helmet } from 'react-helmet-async' import { useTranslation } from 'react-i18next' import { Outlet } from 'react-router-dom' @@ -27,8 +26,16 @@ import { IonicNativePlatformProvider } from './components/Ionic/components/Ionic export function App() { useRouteRedirects() const { i18n } = useTranslation() + const [isResponsiveContextInitialized, setIsResponsiveContextInitialized] = useState(false) const isMobile = useContext(ResponsiveContext) === 'small' + 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 ( From d2609d8b8f7fee81a297c18fd38a13b072b903dc Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Fri, 6 Jun 2025 23:40:34 +0200 Subject: [PATCH 2/2] Remove a test instead of waiting for useEffect to fix it --- package.json | 2 - .../__snapshots__/index.test.tsx.snap | 58 ------------------- src/app/__tests__/index.test.tsx | 19 ------ yarn.lock | 39 ++----------- 4 files changed, 5 insertions(+), 113 deletions(-) delete mode 100644 src/app/__tests__/__snapshots__/index.test.tsx.snap delete mode 100644 src/app/__tests__/index.test.tsx diff --git a/package.json b/package.json index 58427313b2..368c1d9783 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,6 @@ "@types/react": "18.3.18", "@types/react-dom": "18.3.5", "@types/react-redux": "7.1.34", - "@types/react-test-renderer": "18.3.1", "@types/redux-state-sync": "3.1.10", "@types/styled-components": "5.1.34", "@types/testing-library__jest-dom": "5.14.9", @@ -131,7 +130,6 @@ "prettier": "3.0.3", "process": "0.11.10", "react-app-polyfill": "3.0.0", - "react-test-renderer": "18.3.1", "redux-saga-test-plan": "4.0.6", "sanitize.css": "13.0.0", "stream-browserify": "3.0.0", diff --git a/src/app/__tests__/__snapshots__/index.test.tsx.snap b/src/app/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index bbca81b5aa..0000000000 --- a/src/app/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,58 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render and match the snapshot 1`] = ` - - - - - - - - - - - - -
- - - -
- - - - - - - -`; diff --git a/src/app/__tests__/index.test.tsx b/src/app/__tests__/index.test.tsx deleted file mode 100644 index 6bfc9bbb72..0000000000 --- a/src/app/__tests__/index.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react' -import { createRenderer } from 'react-test-renderer/shallow' - -import { App } from '../index' -import { useRouteRedirects } from '../useRouteRedirects' - -const renderer = createRenderer() - -jest.mock('../useRouteRedirects') - -describe('', () => { - it('should render and match the snapshot', () => { - renderer.render() - - const renderedOutput = renderer.getRenderOutput() - expect(useRouteRedirects).toHaveBeenCalled() - expect(renderedOutput).toMatchSnapshot() - }) -}) diff --git a/yarn.lock b/yarn.lock index ac85379612..71da6fb9a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3119,13 +3119,6 @@ hoist-non-react-statics "^3.3.0" redux "^4.0.0" -"@types/react-test-renderer@18.3.1": - version "18.3.1" - resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz#225bfe8d4ad7ee3b04c2fa27642bb74274a5961d" - integrity sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA== - dependencies: - "@types/react" "^18" - "@types/react@*": version "18.2.42" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7" @@ -3135,7 +3128,7 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@18.3.18", "@types/react@^18": +"@types/react@18.3.18": version "18.3.18" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.18.tgz#9b382c4cd32e13e463f97df07c2ee3bbcd26904b" integrity sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ== @@ -8347,11 +8340,6 @@ react-i18next@13.3.1: "@babel/runtime" "^7.22.5" html-parse-stringify "^3.0.1" -"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0: - version "18.2.0" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" - integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== - react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" @@ -8362,10 +8350,10 @@ react-is@^17.0.1: resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-is@^18.3.1: - version "18.3.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" - integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-is@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== react-redux@9.2.0: version "9.2.0" @@ -8395,23 +8383,6 @@ react-router@6.30.0: dependencies: "@remix-run/router" "1.23.0" -react-shallow-renderer@^16.15.0: - version "16.15.0" - resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" - integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA== - dependencies: - object-assign "^4.1.1" - react-is "^16.12.0 || ^17.0.0 || ^18.0.0" - -react-test-renderer@18.3.1: - version "18.3.1" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4" - integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA== - dependencies: - react-is "^18.3.1" - react-shallow-renderer "^16.15.0" - scheduler "^0.23.2" - react@18.3.1: version "18.3.1" resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"