mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
hasithasandun
450dc56cbe
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Bug fix ## What is the current behavior? Resolves #46026 1. **Memory Leak**: The `<Globe />` component in the `www` app creates a new `debouncedResize` event listener every time the theme changes, but in the `useEffect` cleanup function, it attempts to remove `onResize` instead. Because these are two different function references in memory, the listener is never removed, causing a memory leak that grows with theme toggling. 2. **Resolution Scaling**: The WebGL `cobe` globe instance is not notified of width changes dynamically. When a user resizes their browser window, the `<canvas>` resizes via CSS, but the internal 3D rendering stretches and becomes distorted because `state.width` and `state.height` are not updated inside the `onRender` loop. 3. **Local Dev Rendering**: Due to async CSS loading in Next.js development environments, `offsetWidth` evaluates to 0 on initial mount, causing the globe to render invisibly until manually resized. ## What is the new behavior? 1. **Memory Leak Fixed**: Switched from a global `window.addEventListener('resize')` to a `ResizeObserver` attached directly to the canvas container, properly disconnecting it on unmount. 2. **Resolution Scaling Fixed**: Added `state.width` and `state.height` updates directly inside the `onRender` callback. The globe now maintains its aspect ratio and high resolution dynamically as the user resizes the browser. 3. **Local Dev Rendering Fixed**: The `ResizeObserver` correctly triggers a size recalculation exactly when the local Next.js CSS finishes injecting, allowing the globe to render immediately in local dev. 4. **Safe Timeout**: Wrapped the initial opacity update in a null check and correctly store/clear the `timeoutId` during unmount. ## Additional context ## Before https://github.com/user-attachments/assets/813e077d-bcf4-4584-b3da-46c01b6af001 https://github.com/user-attachments/assets/73cef575-27e3-44d2-a191-fd192dec3ef9 ## After https://github.com/user-attachments/assets/cd68c66d-6a35-43d0-971f-04627ef532fb <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Globe now adapts instantly to container size changes for smoother, consistent rendering. * Improved lifecycle cleanup to reliably stop background tasks and clear timers, reducing memory leaks. * Enhanced stability and performance for longer-running sessions of the Globe component. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46025?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
