chore: final improvements before PR merge

apps/site/components/Downloads/Release/PlatformDropdown.tsx

@@ -57,12 +57,12 @@ const PlatformDropdown: FC = () => {
   );
 
   return (
-    <Select<UserPlatform | ''>
+    <Select<UserPlatform>
       values={parsedPlatforms}
-      loading={release.os === 'LOADING'}
+      defaultValue={release.platform !== '' ? release.platform : undefined}
+      loading={release.os === 'LOADING' || release.platform === ''}
       placeholder={t('layouts.download.dropdown.unknown')}
       ariaLabel={t('layouts.download.dropdown.installMethod')}
-      defaultValue={release.platform}
       onChange={platform => platform && release.setPlatform(platform)}
       className="min-w-20"
       inline={true}

apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx

@@ -2,7 +2,7 @@
 
 import { CloudArrowDownIcon } from '@heroicons/react/24/outline';
 import { useTranslations } from 'next-intl';
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
@@ -21,52 +21,37 @@ const PrebuiltDownloadButtons: FC = () => {
   const t = useTranslations();
   const { release, os, platform } = useContext(ReleaseContext);
 
-  const { installerUrl, installerExt, binaryUrl, binaryExt } = useMemo(() => {
-    const installerUrl = getNodeDownloadUrl(
-      release.versionWithPrefix,
-      os,
-      platform || undefined,
-      'installer'
-    );
+  const installerUrl = platform
+    ? getNodeDownloadUrl(release.versionWithPrefix, os, platform, 'installer')
+    : '';
 
-    const binaryUrl = getNodeDownloadUrl(
-      release.versionWithPrefix,
-      os,
-      platform || undefined,
-      'binary'
-    );
-
-    return {
-      installerUrl,
-      binaryUrl,
-      installerExt: getExtension(installerUrl),
-      binaryExt: getExtension(binaryUrl),
-    };
-  }, [os, platform, release.versionWithPrefix]);
+  const binaryUrl = platform
+    ? getNodeDownloadUrl(release.versionWithPrefix, os, platform, 'binary')
+    : '';
 
   return (
     <div className="my-4 flex gap-2">
-      <Skeleton loading={os === 'LOADING'}>
-        <Button
-          href={installerUrl}
-          disabled={OS_NOT_SUPPORTING_INSTALLERS.includes(os)}
-          size="small"
-          className="min-w-56"
-        >
+      <Skeleton
+        loading={os === 'LOADING' || platform === ''}
+        hide={OS_NOT_SUPPORTING_INSTALLERS.includes(os)}
+      >
+        <Button href={installerUrl} size="small" className="min-w-56">
           <CloudArrowDownIcon />
 
           {t('layouts.download.buttons.installer', {
             os: OperatingSystemLabel[os],
-            extension: installerExt,
+            extension: getExtension(installerUrl),
           })}
         </Button>
       </Skeleton>
 
-      <Skeleton loading={os === 'LOADING'}>
+      <Skeleton loading={os === 'LOADING' || platform === ''}>
         <Button href={binaryUrl} size="small" className="min-w-56">
           <CloudArrowDownIcon />
 
-          {t('layouts.download.buttons.binary', { extension: binaryExt })}
+          {t('layouts.download.buttons.binary', {
+            extension: getExtension(binaryUrl),
+          })}
         </Button>
       </Skeleton>
     </div>

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -100,7 +100,7 @@ const ReleaseCodeBox: FC = () => {
       )}
 
       <Skeleton loading={renderSkeleton}>
-        <JSXCodeBox language={codeLanguage} className="min-h-[15.5rem]">
+        <JSXCodeBox language={codeLanguage} className="min-h-[16rem]">
           {parsedSnippets}
         </JSXCodeBox>
       </Skeleton>

apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs

@@ -23,7 +23,7 @@ describe('useDetectOS', () => {
       value: {
         userAgent: windowsUserAgent,
         userAgentData: {
-          getHighEntropyValues: jest.fn().mockResolvedValue({ bitness: 64 }),
+          getHighEntropyValues: jest.fn().mockResolvedValue({ bitness: '64' }),
         },
       },
       writable: true,
@@ -34,17 +34,15 @@ describe('useDetectOS', () => {
     await waitFor(() => {
       expect(result.current).toStrictEqual({
         os: 'WIN',
-        bitness: 64,
-        architecture: '',
+        bitness: '64',
+        architecture: 'x86',
       });
     });
   });
 
   it('should detect WIN OS and 64 bitness from user agent', async () => {
     Object.defineProperty(global, 'navigator', {
-      value: {
-        userAgent: windowsUserAgent,
-      },
+      value: { userAgent: windowsUserAgent },
       writable: true,
     });
 
@@ -53,17 +51,15 @@ describe('useDetectOS', () => {
     await waitFor(() => {
       expect(result.current).toStrictEqual({
         os: 'WIN',
-        bitness: 64,
-        architecture: '',
+        bitness: '64',
+        architecture: 'x86',
       });
     });
   });
 
   it('should detect MAC OS and default bitness', async () => {
     Object.defineProperty(global, 'navigator', {
-      value: {
-        userAgent: macUserAgent,
-      },
+      value: { userAgent: macUserAgent },
       writable: true,
     });
 
@@ -72,8 +68,8 @@ describe('useDetectOS', () => {
     await waitFor(() => {
       expect(result.current).toStrictEqual({
         os: 'MAC',
-        bitness: 64,
-        architecture: '',
+        bitness: '32',
+        architecture: 'x86',
       });
     });
   });

apps/site/hooks/react-client/useDetectOS.ts

@@ -25,6 +25,11 @@ const useDetectOS = () => {
       navigator.userAgent
     );
 
+    // 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() }));
+
     // 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
     // to determine the bitness and architecture of the User OS.
@@ -37,7 +42,6 @@ const useDetectOS = () => {
       }) => {
         setUserOSState(current => ({
           ...current,
-          os: detectOS(),
           bitness: bitness as UserBitness,
           architecture: architecture as UserArchitecture,
         }));

apps/site/providers/__tests__/matterProvider.test.mjs

@@ -8,18 +8,15 @@ const mockContext = {
   headings: [],
   readingTime: { text: '', minutes: 0, time: 0, words: 0 },
   filename: '',
-  // @TODO: For some reason the initial value of the provider is flipping between
-  // LOADING and OTHER, although the initial state is LOADING, render() might be doing more
-  // than just initial rendering; This requires more investigation.
-  os: expect.any(String),
+  os: 'LOADING',
   architecture: '',
-  bitness: 64,
+  bitness: '',
 };
 
 describe('MatterProvider', () => {
   it('renders the provider with the provided context value', () => {
     render(
-      <MatterProvider>
+      <MatterProvider os="LOADING">
         <MatterContext.Consumer>
           {value => {
             expect(value).toEqual(mockContext);

apps/site/reducers/releaseReducer.ts

@@ -9,7 +9,8 @@ export const releaseState: Types.ReleaseState = {
   // Until the User's OS is detected (or failed to be detected)
   os: 'LOADING',
   // The detected User Platform from a combination of Bitness and Architecture
-  platform: '',
+  // We set the default value to `x64` as it is the most common platform for modern systems
+  platform: 'x64',
   // The selected installation method when not choosing an installer or prebuilt binary
   installMethod: '',
   // The package manager field is always set by default to `NPM`