From fef1932cc7b8c3f6f09ca90e21c7cdef43ced6c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?=
 <rodrigoj.borba@gmail.com>
Date: Mon, 6 Jan 2025 12:28:28 -0300
Subject: [PATCH] chore: reduce Searchbox button layout shift (#7358)

---
 apps/site/components/Common/Search/utils.ts           |  3 +++
 apps/site/components/Common/Skeleton/index.tsx        |  6 ++++--
 .../components/Containers/NavBar/index.module.css     | 11 +++++++++++
 apps/site/components/Containers/NavBar/index.tsx      |  4 ++++
 4 files changed, 22 insertions(+), 2 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 640c1f2e3852d..8b8d43753d608 100644
--- a/apps/site/components/Common/Skeleton/index.tsx
+++ b/apps/site/components/Common/Skeleton/index.tsx
@@ -1,12 +1,14 @@
+import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 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 +28,7 @@ const Skeleton: FC<PropsWithChildren<SkeletonProps>> = ({
     <span
       tabIndex={-1}
       aria-hidden="true"
-      className={styles.skeleton}
+      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 e31532c14c759..3cc1412b8c0e2 100644
--- a/apps/site/components/Containers/NavBar/index.module.css
+++ b/apps/site/components/Containers/NavBar/index.module.css
@@ -86,6 +86,17 @@
     dark:border-neutral-900;
 }
 
+span.searchButtonSkeleton {
+  @apply my-px
+    mr-2
+    flex-grow
+    rounded-xl;
+
+  &:empty {
+    @apply h-10;
+  }
+}
+
 .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 5af65deddd09a..19239f1c4f6c9 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,9 @@ import style from './index.module.css';
 
 const SearchButton = dynamic(() => import('@/components/Common/Search'), {
   ssr: false,
+  loading: () => (
+    <Skeleton className={style.searchButtonSkeleton} loading={true} />
+  ),
 });
 
 const navInteractionIcons = {