fix: sidebar skeleton hydration mismatch

[miketeow]

Description

This PR fixes a hydration mismatch error caused by using Math.random() inside useMemo (or useState initializers) in the SidebarMenuSkeleton component.

Supersedes #8510

This PR supersedes #8510.
While the approach in #8510 resolves the linter error, it uses useState with a random initializer. In Next.js (SSR), this causes a Hydration Mismatch because the server generates one random number and the client generates a different one during the initial render.

The Solution

I implemented a two-pass approach to ensure hydration safety:

1. Server/Initial Render: The width initializes to a deterministic value ("50%") so the Server HTML and Client HTML are identical.
2. Effect Phase: A useEffect hook randomizes the width immediately after mount.

This prevents the "Text content does not match server-rendered HTML" warning and ensures the component is theoretically pure during the render phase.

Type of change

• Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have verified that the skeleton renders correctly without hydration errors

[vercel]

@miketeow is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.