fix: AnimatedGridPattern hydration + effect loop + invalid DOM prop

[Yeom-JinHo]

closed #854 #848

Description

This PR focuses on fixing React warnings and hydration issues in the AnimatedGridPattern component.
It also addresses a render loop / maximum update depth issue caused by unstable effect dependencies.

Changes

• Invalid DOM prop fix: Prevented repeatDelay from leaking into the root <svg> via ...props, removing the React warning.
• Hydration stability: Avoided SSR/CSR attribute mismatches by deferring random square generation until client dimensions are known.
• Effect stability + cleanup: Stabilized effect dependencies to prevent update loops and improved ResizeObserver cleanup with disconnect().

Motivation

• Remove noisy React warnings (repeatDelay on DOM elements).
• Prevent hydration mismatches caused by variable inputs (e.g. Math.random()).
• Avoid runtime errors like Maximum update depth exceeded and make resize handling more robust.

Breaking Changes

• None.

[vercel]

@Yeom-JinHo is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[Yeom-JinHo]

@dillionverma @itsarghyadas
Some files weren’t properly formatted, so I fixed them in #859 and opened a PR.
Before reviewing this PR, I’d appreciate it if you could review #859 first.

[itsarghyadas]

@Yeom-JinHo merging this PR, looks good.

Thanks.