chore: reduce Searchbox button layout shift (#7358)

nodejs · Jan 6, 2025 · fef1932 · fef1932
1 parent 4b710a9
commit fef1932
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 = {