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,37 +94,43 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
 
             {/* Headers */}
             <ul className="relative">
-                {headers.map((header: Header) => (
+                {headers.length === 0 ? (
-                    <li
+                    <Skeleton className="w-full h-5 bg-accent rounded-lg" />
-                        key={header.id}
+                ) : (
-                        className={cn(
+                    headers.map((header: Header) => (
-                            "hover:opacity-80 transition-all transform-gpu relative",
+                        <li
-                            activeHeader === header.id
+                            key={header.id}
-                                ? "font-semibold text-primary"
+                            className={cn(
-                                : "opacity-65"
+                                "hover:opacity-80 transition-all transform-gpu relative",
-                        )}
+                                activeHeader === header.id
-                        style={{ paddingLeft: `${(header.level - 1) * 16}px` }}
+                                    ? "font-semibold text-primary"
-                    >
+                                    : "opacity-65"
-                        {/* Indentation */}
+                            )}
-                        {header.level > 1 && (
+                            style={{
-                            <div
+                                paddingLeft: `${(header.level - 1) * 16}px`,
-                                className="absolute left-0 top-0 bottom-0 border-l border-accent"
+                            }}
-                                style={{
-                                    left: `${(header.level - 2) * 16 + 4}px`,
-                                }}
-                            />
-                        )}
-
-                        {/* Header */}
-                        <Link
-                            href={`#${header.id}`}
-                            draggable={false}
-                            className="block py-1"
                         >
-                            {truncateText(header.text, 20)}
+                            {/* Indentation */}
-                        </Link>
+                            {header.level > 1 && (
-                    </li>
+                                <div
-                ))}
+                                    className="absolute left-0 top-0 bottom-0 border-l border-accent"
+                                    style={{
+                                        left: `${(header.level - 2) * 16 + 4}px`,
+                                    }}
+                                />
+                            )}
+
+                            {/* Header */}
+                            <Link
+                                href={`#${header.id}`}
+                                draggable={false}
+                                className="block py-1"
+                            >
+                                {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 };