Skip to content

fix: resolve react-hooks/purity ESLint error in sidebarmenuskeleton #8546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+36 −12
Open

fix: resolve react-hooks/purity ESLint error in sidebarmenuskeleton #8546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc3468b
update
naaa760 Oct 23, 2025
7beb48b
aded lazy initialization: The Math.random() call is now inside the st…
naaa760 Oct 23, 2025
c26d8ab
update sidebar
naaa760 Oct 23, 2025
376eb03
fix: make sidebar skeleton widths deterministic for purity rule
naaa760 Nov 7, 2025
189c105
Merge remote-tracking branch 'upstream/main' into fix/fix/sidebar-pur…
naaa760 Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions apps/v4/registry/new-york-v4/ui/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,17 +599,25 @@ function SidebarMenuBadge({
)
}

function getSkeletonWidth(id: string) {
let hash = 0
for (const char of id) {
hash = (hash << 5) - hash + char.charCodeAt(0)
}

return `${50 + (Math.abs(hash) % 41)}%`
}

function SidebarMenuSkeleton({
className,
showIcon = false,
...props
}: React.ComponentProps<"div"> & {
showIcon?: boolean
}) {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`
}, [])
// Deterministic pseudo-random width between 50 to 90%.
const id = React.useId()
const width = React.useMemo(() => getSkeletonWidth(id), [id])

return (
<div
Expand Down
16 changes: 12 additions & 4 deletions deprecated/www/registry/default/ui/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -654,16 +654,24 @@ const SidebarMenuBadge = React.forwardRef<
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"

function getSkeletonWidth(id: string) {
let hash = 0
for (const char of id) {
hash = (hash << 5) - hash + char.charCodeAt(0)
}

return `${50 + (Math.abs(hash) % 41)}%`
}

const SidebarMenuSkeleton = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
showIcon?: boolean
}
>(({ className, showIcon = false, ...props }, ref) => {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`
}, [])
// Deterministic pseudo-random width between 50 to 90%.
const id = React.useId()
const width = React.useMemo(() => getSkeletonWidth(id), [id])

return (
<div
Expand Down
16 changes: 12 additions & 4 deletions deprecated/www/registry/new-york/ui/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -654,16 +654,24 @@ const SidebarMenuBadge = React.forwardRef<
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"

function getSkeletonWidth(id: string) {
let hash = 0
for (const char of id) {
hash = (hash << 5) - hash + char.charCodeAt(0)
}

return `${50 + (Math.abs(hash) % 41)}%`
}

const SidebarMenuSkeleton = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
showIcon?: boolean
}
>(({ className, showIcon = false, ...props }, ref) => {
// Random width between 50 to 90%.
const width = React.useMemo(() => {
return `${Math.floor(Math.random() * 40) + 50}%`
}, [])
// Deterministic pseudo-random width between 50 to 90%.
const id = React.useId()
const width = React.useMemo(() => getSkeletonWidth(id), [id])

return (
<div
Expand Down