From 3057ebf73685c5bfdd545dd837e4597ba09246fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?=
 <rodrigoj.borba@gmail.com>
Date: Wed, 25 Dec 2024 15:34:03 -0300
Subject: [PATCH 1/4] chore: reduce Searchbox button layout shift

---
 apps/site/components/Containers/NavBar/index.module.css | 5 +++++
 apps/site/components/Containers/NavBar/index.tsx        | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/site/components/Containers/NavBar/index.module.css b/apps/site/components/Containers/NavBar/index.module.css
index e31532c14c759..4ef171d02499a 100644
--- a/apps/site/components/Containers/NavBar/index.module.css
+++ b/apps/site/components/Containers/NavBar/index.module.css
@@ -12,6 +12,11 @@
     dark:bg-neutral-950;
 }
 
+.searchWrapper {
+  @apply flex
+    flex-grow;
+}
+
 .nodeIconAndMobileItemsToggler {
   @apply flex
     h-16
diff --git a/apps/site/components/Containers/NavBar/index.tsx b/apps/site/components/Containers/NavBar/index.tsx
index 5af65deddd09a..26e16d9fc84e6 100644
--- a/apps/site/components/Containers/NavBar/index.tsx
+++ b/apps/site/components/Containers/NavBar/index.tsx
@@ -71,7 +71,9 @@ const NavBar: FC<NavbarProps> = ({
         </div>
 
         <div className={style.actionsWrapper}>
-          <SearchButton />
+          <div className={style.searchWrapper}>
+            <SearchButton />
+          </div>
 
           <ThemeToggle onClick={onThemeTogglerClick} />
 

From 07c5a14f53a3e78145513977b8c6d91bb4570323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?=
 <rodrigoj.borba@gmail.com>
Date: Thu, 2 Jan 2025 08:57:26 -0300
Subject: [PATCH 2/4] chore: allow classes to Skeleton component

---
 apps/site/components/Common/Skeleton/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/site/components/Common/Skeleton/index.tsx b/apps/site/components/Common/Skeleton/index.tsx
index 640c1f2e3852d..3801f950e02b4 100644
--- a/apps/site/components/Common/Skeleton/index.tsx
+++ b/apps/site/components/Common/Skeleton/index.tsx
@@ -3,10 +3,11 @@ import { isValidElement } from 'react';
 
 import styles from './index.module.css';
 
-type SkeletonProps = { hide?: boolean; loading?: boolean };
+type SkeletonProps = { hide?: boolean; loading?: boolean; className?: string };
 
 const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
   children,
+  className,
   hide = false,
   loading = true,
 }) => {
@@ -26,7 +27,7 @@ const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
     <span
       tabIndex={-1}
       aria-hidden="true"
-      className={styles.skeleton}
+      className={`${styles.skeleton} ${className}`}
       data-inline-skeleton={isValidElement(children) ? undefined : true}
     >
       {children}

From 0d6467a5ba9549b0bdb3074d0b9022f521acabb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?=
 <rodrigoj.borba@gmail.com>
Date: Thu, 2 Jan 2025 08:58:14 -0300
Subject: [PATCH 3/4] chore: use skeleton component as searchbox placeholder

---
 apps/site/components/Containers/NavBar/index.module.css | 9 ++++-----
 apps/site/components/Containers/NavBar/index.tsx        | 6 +++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/site/components/Containers/NavBar/index.module.css b/apps/site/components/Containers/NavBar/index.module.css
index 4ef171d02499a..343f0b6db2ccf 100644
--- a/apps/site/components/Containers/NavBar/index.module.css
+++ b/apps/site/components/Containers/NavBar/index.module.css
@@ -12,11 +12,6 @@
     dark:bg-neutral-950;
 }
 
-.searchWrapper {
-  @apply flex
-    flex-grow;
-}
-
 .nodeIconAndMobileItemsToggler {
   @apply flex
     h-16
@@ -91,6 +86,10 @@
     dark:border-neutral-900;
 }
 
+.searchButtonSkeleton {
+  @apply flex-grow;
+}
+
 .ghIconWrapper {
   @apply size-9
     rounded-md
diff --git a/apps/site/components/Containers/NavBar/index.tsx b/apps/site/components/Containers/NavBar/index.tsx
index 26e16d9fc84e6..856a46eacc75d 100644
--- a/apps/site/components/Containers/NavBar/index.tsx
+++ b/apps/site/components/Containers/NavBar/index.tsx
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import type { FC, ComponentProps, HTMLAttributeAnchorTarget } from 'react';
 
 import LanguageDropdown from '@/components/Common/LanguageDropDown';
+import Skeleton from '@/components/Common/Skeleton';
 import ThemeToggle from '@/components/Common/ThemeToggle';
 import NavItem from '@/components/Containers/NavBar/NavItem';
 import GitHub from '@/components/Icons/Social/GitHub';
@@ -19,6 +20,7 @@ import style from './index.module.css';
 
 const SearchButton = dynamic(() => import('@/components/Common/Search'), {
   ssr: false,
+  loading: () => <Skeleton className={style.searchButtonSkeleton} loading />,
 });
 
 const navInteractionIcons = {
@@ -71,9 +73,7 @@ const NavBar: FC<NavbarProps> = ({
         </div>
 
         <div className={style.actionsWrapper}>
-          <div className={style.searchWrapper}>
-            <SearchButton />
-          </div>
+          <SearchButton />
 
           <ThemeToggle onClick={onThemeTogglerClick} />
 

From 115dfcef8ba7e951c13ec16af5921d0f60530cd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?=
 <rodrigoj.borba@gmail.com>
Date: Fri, 3 Jan 2025 16:46:02 -0300
Subject: [PATCH 4/4] chore: adjust placeholder for searchbox / load Open Sans
 for searchbox button

---
 apps/site/components/Common/Search/utils.ts           |  3 +++
 apps/site/components/Common/Skeleton/index.tsx        |  3 ++-
 .../components/Containers/NavBar/index.module.css     | 11 +++++++++--
 apps/site/components/Containers/NavBar/index.tsx      |  4 +++-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/site/components/Common/Search/utils.ts b/apps/site/components/Common/Search/utils.ts
index 429f47b3a7d58..fdab2c893008f 100644
--- a/apps/site/components/Common/Search/utils.ts
+++ b/apps/site/components/Common/Search/utils.ts
@@ -2,6 +2,9 @@ import tailwindConfig from '@/tailwind.config';
 
 const colors = tailwindConfig.theme.colors;
 export const themeConfig = {
+  typography: {
+    '--font-primary': 'var(--font-open-sans)',
+  },
   colors: {
     light: {
       '--text-color-primary': colors.neutral[900],
diff --git a/apps/site/components/Common/Skeleton/index.tsx b/apps/site/components/Common/Skeleton/index.tsx
index 3801f950e02b4..8b8d43753d608 100644
--- a/apps/site/components/Common/Skeleton/index.tsx
+++ b/apps/site/components/Common/Skeleton/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 import { isValidElement } from 'react';
 
@@ -27,7 +28,7 @@ const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
     <span
       tabIndex={-1}
       aria-hidden="true"
-      className={`${styles.skeleton} ${className}`}
+      className={classNames(styles.skeleton, className)}
       data-inline-skeleton={isValidElement(children) ? undefined : true}
     >
       {children}
diff --git a/apps/site/components/Containers/NavBar/index.module.css b/apps/site/components/Containers/NavBar/index.module.css
index 343f0b6db2ccf..3cc1412b8c0e2 100644
--- a/apps/site/components/Containers/NavBar/index.module.css
+++ b/apps/site/components/Containers/NavBar/index.module.css
@@ -86,8 +86,15 @@
     dark:border-neutral-900;
 }
 
-.searchButtonSkeleton {
-  @apply flex-grow;
+span.searchButtonSkeleton {
+  @apply my-px
+    mr-2
+    flex-grow
+    rounded-xl;
+
+  &:empty {
+    @apply h-10;
+  }
 }
 
 .ghIconWrapper {
diff --git a/apps/site/components/Containers/NavBar/index.tsx b/apps/site/components/Containers/NavBar/index.tsx
index 856a46eacc75d..19239f1c4f6c9 100644
--- a/apps/site/components/Containers/NavBar/index.tsx
+++ b/apps/site/components/Containers/NavBar/index.tsx
@@ -20,7 +20,9 @@ import style from './index.module.css';
 
 const SearchButton = dynamic(() => import('@/components/Common/Search'), {
   ssr: false,
-  loading: () => <Skeleton className={style.searchButtonSkeleton} loading />,
+  loading: () => (
+    <Skeleton className={style.searchButtonSkeleton} loading={true} />
+  ),
 });
 
 const navInteractionIcons = {