feat(search): Enhance shortcut key transition for OS detection (#6554)

* feat(search): Enhance shortcut key transition for OS detection

* fix(search): Optimize transition and apply style directly to kbd

Author: edereagzi

components/Common/Search/index.module.css

@@ -29,6 +29,8 @@
     absolute
     right-2
     ml-2
-    md:visible
-    [&>kbd]:font-ibm-plex-mono;
+    font-ibm-plex-mono
+    motion-safe:transition-opacity
+    motion-safe:duration-100
+    md:visible;
 }

components/Common/Search/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
 import { useTranslations } from 'next-intl';
 import { useState, type FC } from 'react';
 
@@ -31,6 +32,7 @@ export const SearchButton: FC = () => {
   const { os } = useDetectOS();
 
   const osCommandKey = os === 'MAC' ? '⌘' : 'Ctrl';
+  const isOSLoading = os === 'LOADING';
 
   return (
     <>
@@ -42,9 +44,14 @@ export const SearchButton: FC = () => {
         <MagnifyingGlassIcon className={styles.magnifyingGlassIcon} />
 
         {t('components.search.searchBox.placeholder')}
-        <span title={`${osCommandKey} K`} className={styles.shortcutIndicator}>
-          <kbd>{osCommandKey} K</kbd>
-        </span>
+        <kbd
+          title={`${osCommandKey} K`}
+          className={classNames(styles.shortcutIndicator, {
+            'opacity-0': isOSLoading,
+          })}
+        >
+          <abbr>{osCommandKey} K</abbr>
+        </kbd>
       </button>
 
       {isOpen ? <WithSearchBox onClose={closeSearchBox} /> : null}

hooks/react-client/useDetectOS.ts

@@ -15,7 +15,7 @@ type UserOSState = {
 
 const useDetectOS = () => {
   const [userOSState, setUserOSState] = useState<UserOSState>({
-    os: 'OTHER',
+    os: 'LOADING',
     bitness: 86,
     architecture: 'ARM',
   });

types/userOS.ts

@@ -1 +1 @@
-export type UserOS = 'MAC' | 'WIN' | 'LINUX' | 'OTHER';
+export type UserOS = 'MAC' | 'WIN' | 'LINUX' | 'OTHER' | 'LOADING';

util/downloadUtils.ts

@@ -91,6 +91,7 @@ export const bitnessItems = {
     },
   ],
   OTHER: [],
+  LOADING: [],
 };
 
 type formatDropdownItemsType = {