feat: streamline detectos (only run query once)

Author: ovflowd

apps/site/components/Downloads/DownloadButton/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 
 import Button from '@/components/Common/Button';
-import { useDetectOS } from '@/hooks';
+import { useClientContext } from '@/hooks';
 import type { NodeRelease } from '@/types';
 import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 import { getUserBitnessByArchitecture } from '@/util/getUserBitnessByArchitecture';
@@ -22,7 +22,8 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
     os,
     bitness: userBitness,
     architecture: userArchitecture,
-  } = useDetectOS();
+  } = useClientContext();
+
   const bitness = getUserBitnessByArchitecture(userArchitecture, userBitness);
   const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
 

apps/site/components/Downloads/DownloadLink.tsx

@@ -2,7 +2,7 @@
 
 import type { FC, PropsWithChildren } from 'react';
 
-import { useDetectOS } from '@/hooks';
+import { useClientContext } from '@/hooks';
 import type { NodeRelease } from '@/types';
 import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 
@@ -12,7 +12,7 @@ const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
   release: { versionWithPrefix },
   children,
 }) => {
-  const { os, bitness } = useDetectOS();
+  const { os, bitness } = useClientContext();
   const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
 
   return <a href={downloadLink}>{children}</a>;

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

@@ -6,7 +6,7 @@ import { useEffect, useContext, useMemo } from 'react';
 import semVer from 'semver';
 
 import Select from '@/components/Common/Select';
-import { useDetectOS } from '@/hooks/react-client';
+import { useClientContext } from '@/hooks';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import { bitnessItems, formatDropdownItems } from '@/util/downloadUtils';
 import { getUserBitnessByArchitecture } from '@/util/getUserBitnessByArchitecture';
@@ -16,7 +16,7 @@ const parseNumericBitness = (bitness: string) =>
 
 const BitnessDropdown: FC = () => {
   const { bitness: userBitness, architecture: userArchitecture } =
-    useDetectOS();
+    useClientContext();
   const { bitness, os, release, setBitness } = useContext(ReleaseContext);
   const t = useTranslations();
 
@@ -102,6 +102,7 @@ const BitnessDropdown: FC = () => {
         items: bitnessItems[os],
         disabledItems,
       })}
+      loading={os === 'LOADING'}
       ariaLabel={t('layouts.download.dropdown.bitness')}
       defaultValue={String(bitness)}
       onChange={bitness => setBitness(parseNumericBitness(bitness))}

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

@@ -9,7 +9,7 @@ import Apple from '@/components/Icons/Platform/Apple';
 import Aix from '@/components/Icons/Platform/Generic';
 import Linux from '@/components/Icons/Platform/Linux';
 import Microsoft from '@/components/Icons/Platform/Microsoft';
-import { useDetectOS } from '@/hooks/react-client';
+import { useClientContext } from '@/hooks';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import type { UserOS } from '@/types/userOS';
 import {
@@ -22,7 +22,7 @@ type OperatingSystemDropdownProps = { exclude?: Array<UserOS> };
 const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
   exclude = [],
 }) => {
-  const { os: userOS } = useDetectOS();
+  const { os: userOS } = useClientContext();
   const { os, setOS } = useContext(ReleaseContext);
   const t = useTranslations();
 

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

@@ -6,7 +6,6 @@ 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';
@@ -40,11 +39,9 @@ const ReleaseCodeBox: FC = () => {
         </Banner>
       )}
 
-      <Skeleton loading={os === 'LOADING'}>
-        <JSXCodeBox language={codeLanguage} className="min-h-[12rem]">
-          {parsedSnippet}
-        </JSXCodeBox>
-      </Skeleton>
+      <JSXCodeBox language={codeLanguage} className="min-h-[12rem]">
+        {parsedSnippet}
+      </JSXCodeBox>
 
       <span className="text-center text-xs text-neutral-800 dark:text-neutral-200">
         {t('layouts.download.codeBox.communityWarning')}

apps/site/components/withCurrentOS.tsx

@@ -6,10 +6,27 @@ import { MatterContext } from '@/providers/matterProvider';
 import type { ClientSharedServerContext } from '@/types';
 
 const useClientContext = (): ClientSharedServerContext => {
-  const { frontmatter, pathname, headings, readingTime, filename } =
-    useContext(MatterContext);
+  const {
+    frontmatter,
+    pathname,
+    headings,
+    readingTime,
+    filename,
+    os,
+    architecture,
+    bitness,
+  } = useContext(MatterContext);
 
-  return { pathname, frontmatter, headings, readingTime, filename };
+  return {
+    pathname,
+    frontmatter,
+    headings,
+    readingTime,
+    filename,
+    os,
+    architecture,
+    bitness,
+  };
 };
 
 export default useClientContext;

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

@@ -15,16 +15,17 @@ type UserOSState = {
 
 const useDetectOS = () => {
   const [userOSState, setUserOSState] = useState<UserOSState>({
-    os: 'LOADING',
-    bitness: 86,
-    architecture: 'ARM',
+    os: detectOS(),
+    bitness: 64,
+    architecture: 'x64',
   });
 
   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

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

@@ -3,6 +3,7 @@
 import { createContext } from 'react';
 import type { FC, PropsWithChildren } from 'react';
 
+import { useDetectOS } from '@/hooks';
 import type { ClientSharedServerContext } from '@/types';
 import { assignClientContext } from '@/util/assignClientContext';
 
@@ -17,8 +18,12 @@ type MatterProviderProps = PropsWithChildren<
 export const MatterProvider: FC<MatterProviderProps> = ({
   children,
   ...data
-}) => (
-  <MatterContext.Provider value={assignClientContext(data)}>
-    {children}
-  </MatterContext.Provider>
-);
+}) => {
+  const os = useDetectOS();
+
+  return (
+    <MatterContext.Provider value={assignClientContext({ ...os, ...data })}>
+      {children}
+    </MatterContext.Provider>
+  );
+};

apps/site/providers/matterProvider.tsx

@@ -1,9 +1,11 @@
 import type { Heading } from '@vcarl/remark-headings';
 import type { ReadTimeResults } from 'reading-time';
 
-import type { LegacyFrontMatter } from './frontmatter';
+import type { useDetectOS } from '@/hooks';
+import type { LegacyFrontMatter } from '@/types/frontmatter';
 
-export interface ClientSharedServerContext {
+export interface ClientSharedServerContext
+  extends ReturnType<typeof useDetectOS> {
   frontmatter: LegacyFrontMatter;
   headings: Array<Heading>;
   pathname: string;