diff --git a/apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs b/apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs index ce9616ae418ad..f1b644c6af2f9 100644 --- a/apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs +++ b/apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs @@ -71,8 +71,8 @@ describe('useDetectOS', () => { await waitFor(() => { assert.deepEqual(result.current, { os: 'MAC', - bitness: '32', - architecture: 'x86', + bitness: '64', + architecture: 'arm', }); }); }); diff --git a/apps/site/hooks/react-client/useDetectOS.ts b/apps/site/hooks/react-client/useDetectOS.ts index dc2d2cfcdf244..f7da9ebacfd2f 100644 --- a/apps/site/hooks/react-client/useDetectOS.ts +++ b/apps/site/hooks/react-client/useDetectOS.ts @@ -7,7 +7,7 @@ import type { Bitness, OperatingSystem, } from '#site/types/userAgent'; -import { getHighEntropyValues, detectOS } from '#site/util/userAgent'; +import { detectOS, getHighEntropyValues } from '#site/util/userAgent'; type UserOSState = { os: OperatingSystem | 'LOADING'; @@ -28,10 +28,12 @@ const useDetectOS = () => { navigator.userAgent ); + const os = detectOS(); + // We immediately set the OS to LOADING, and then we update it with the detected OS. // This is due to that initial render set within the state will indicate a mismatch from // the server-side rendering versus what the initial state is from the client-side - setUserOSState(current => ({ ...current, os: detectOS() })); + setUserOSState(current => ({ ...current, os })); // We attempt to get the high entropy values from the Browser and set the User OS State // based from the values we get from the Browser, if it fails we fallback to the User Agent @@ -40,8 +42,9 @@ const useDetectOS = () => { ({ // If there is no getHighEntropyValues API on the Browser or it failed to resolve // we attempt to fallback to what the User Agent indicates - bitness = uaIndicates64 ? '64' : '32', - architecture = 'x86', + bitness = os === 'MAC' || uaIndicates64 ? '64' : '32', + // we assume that MacOS has moved to arm64 by default now + architecture = os === 'MAC' ? 'arm' : 'x86', }) => { setUserOSState(current => ({ ...current,