chore: improved loading state

Author: ovflowd

apps/site/components/Common/Search/index.tsx

@@ -3,7 +3,7 @@
 import { OramaSearchBox, OramaSearchButton } from '@orama/react-components';
 import { useTranslations, useLocale } from 'next-intl';
 import { useTheme } from 'next-themes';
-import { type FC } from 'react';
+import type { FC } from 'react';
 
 import { useRouter } from '@/navigation.mjs';
 import {

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

@@ -20,9 +20,6 @@ const BitnessDropdown: FC = () => {
   const { bitness, os, release, setBitness } = useContext(ReleaseContext);
   const t = useTranslations();
 
-  // we also reset the bitness when the OS changes, because different OSs have
-  // different bitnesses available
-
   useEffect(() => {
     setBitness(getUserBitnessByArchitecture(userArchitecture, userBitness));
     // we shouldn't update the effect on setter state change

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

@@ -26,7 +26,6 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
   const { os, setOS } = useContext(ReleaseContext);
   const t = useTranslations();
 
-  // we shouldn't react when "actions" change
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => setOS(userOS), [userOS]);
 

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

@@ -6,6 +6,7 @@ import { useContext, useMemo } from 'react';
 import semVer from 'semver';
 
 import Banner from '@/components/Common/Banner';
+import Skeleton from '@/components/Common/Skeleton';
 import JSXCodeBox from '@/components/JSX/CodeBox';
 import { ESP_SUPPORT_THRESHOLD_VERSION } from '@/next.constants.mjs';
 import { createSval } from '@/next.jsx.compiler.mjs';
@@ -39,9 +40,11 @@ const ReleaseCodeBox: FC = () => {
         </Banner>
       )}
 
-      <JSXCodeBox language={codeLanguage} className="min-h-[12rem]">
-        {parsedSnippet}
-      </JSXCodeBox>
+      <Skeleton loading={os === 'LOADING'}>
+        <JSXCodeBox language={codeLanguage} className="min-h-[12rem]">
+          {parsedSnippet}
+        </JSXCodeBox>
+      </Skeleton>
 
       <span className="text-center text-xs text-neutral-800 dark:text-neutral-200">
         {t('layouts.download.codeBox.communityWarning')}

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

@@ -15,31 +15,33 @@ type UserOSState = {
 
 const useDetectOS = () => {
   const [userOSState, setUserOSState] = useState<UserOSState>({
-    os: detectOS(),
+    os: 'LOADING',
     bitness: 64,
-    architecture: 'x64',
+    architecture: '',
   });
 
   useEffect(() => {
-    Promise.all([getBitness(), getArchitecture()]).then(
-      ([bitness, architecture]) => {
-        const userAgent: string | undefined =
-          (typeof navigator === 'object' && navigator.userAgent) || '';
-
-        // Default bitness if unable to determine
-        const defaultBitness: number = 86;
-        // Regex to detect 64-bit architecture in user agent
-        const bitnessRegex = /WOW64|Win64|x86_64|x86-64|x64_64|x64;|AMD64/;
-
-        setUserOSState({
-          os: detectOS(),
-          bitness:
-            bitness === '64' || bitnessRegex.test(userAgent)
-              ? 64
-              : defaultBitness,
-          architecture: architecture ? architecture : '',
-        });
-      }
+    // If the navigator User Agent indicates a 64-bit OS, we can assume the bitness is 64.
+    const uaIndicates64 = /WOW64|Win64|x86_64|x86-64|x64_64|x64;|AMD64/.test(
+      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 then update the bitness based on the detected OS and the user agent
+    getBitness().then((bitness = '64') =>
+      setUserOSState(current => ({
+        ...current,
+        bitness: bitness === '64' || uaIndicates64 ? 64 : 86,
+      }))
+    );
+
+    // We then update the architecture based on the detected OS
+    getArchitecture().then((architecture = '') =>
+      setUserOSState(current => ({ ...current, architecture }))
     );
   }, []);