fix sidebar padding, and add a skeleton for the on this page headers

Took 10 minutes

src/app/layout.tsx

@@ -41,9 +41,9 @@ const RootLayout = async ({
                     disableTransitionOnChange
                 >
                     <TooltipProvider delayDuration={100}>
-                        <div className="px-3 md:px-7 max-w-screen-2xl min-h-screen mx-auto flex flex-col">
+                        <div className="px-3 md:px-7 max-w-screen-2xl min-h-screen mx-auto flex flex-col transition-transform">
                             <Navbar pages={pages} />
-                            <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5 sm:gap-8">
+                            <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5 sm:gap-8 transition-transform transform-gpu">
                                 <div className="relative hidden xs:flex">
                                     <Sidebar pages={pages} />
                                 </div>

src/components/on-this-page.tsx

@@ -9,6 +9,7 @@ import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import { AlignLeftIcon, ArrowUpFromDot, MoveRight } from "lucide-react";
 import config from "@/config";
+import { Skeleton } from "@/components/ui/skeleton";
 
 type Header = {
     id: string;
@@ -81,7 +82,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
         <motion.div
             ref={ref}
             className="sticky top-[7.5rem] w-44 max-h-[calc(100vh-3.5rem)] flex flex-col gap-2 text-sm select-none"
-            initial={{ opacity: 0 }}
+            initial={{ opacity: 1 }}
             animate={{ opacity: inView ? 1 : 0 }}
             transition={{ duration: 0.2 }}
         >
@@ -93,7 +94,10 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
 
             {/* Headers */}
             <ul className="relative">
-                {headers.map((header: Header) => (
+                {headers.length === 0 ? (
+                    <Skeleton className="w-full h-5 bg-accent rounded-lg" />
+                ) : (
+                    headers.map((header: Header) => (
                         <li
                             key={header.id}
                             className={cn(
@@ -102,7 +106,9 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
                                     ? "font-semibold text-primary"
                                     : "opacity-65"
                             )}
-                        style={{ paddingLeft: `${(header.level - 1) * 16}px` }}
+                            style={{
+                                paddingLeft: `${(header.level - 1) * 16}px`,
+                            }}
                         >
                             {/* Indentation */}
                             {header.level > 1 && (
@@ -123,7 +129,8 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
                                 {truncateText(header.text, 20)}
                             </Link>
                         </li>
-                ))}
+                    ))
+                )}
             </ul>
 
             {/* Footer */}

src/components/sidebar/sidebar-links.tsx

@@ -72,7 +72,7 @@ const CategoryItem = ({
                     >
                         <Button
                             className={cn(
-                                `relative w-full px-1.5 h-8 justify-between hover:bg-accent/35`,
+                                `relative w-full px-1.5 h-8 justify-between hover:bg-accent/35 hover:opacity-90`,
                                 node.isFolder
                                     ? "mb-0.5 text-sm font-semibold"
                                     : "lg:text-base",

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn("animate-pulse rounded-md bg-primary/10", className)}
+            {...props}
+        />
+    );
+}
+
+export { Skeleton };