mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
Joshen Lim
23e7bbcdc6
## Context Adds virtualization to the organization team members page - browser performance was facing issues for organizations with a large amount of members (e.g 1000+), primarily due to some computation within `MemberActions.tsx`, so virtualization addresses this by controlling the number of member rows being rendered in the DOM at any one time. <img width="1182" height="435" alt="image" src="https://github.com/user-attachments/assets/e3da7036-c1c8-4d73-a363-85ecbdb79179" /> ## Unrelated changes - Updated `TeamSettings` to use the `PageContainer` components for UI consistency - Updated user `ProfileImage` to render the first alphabet of the email, rather than a generic user icon <img width="275" height="126" alt="image" src="https://github.com/user-attachments/assets/17eae3b1-c527-4b8f-afcd-c5151bdaf869" /> - Updated row heights of member rows to be more smaller - Updated MFA column to use tooltips with a clearer CTA for members that don't have MFA enabled <img width="332" height="144" alt="image" src="https://github.com/user-attachments/assets/a479af31-7fec-454d-b64e-e6314fd6d55e" /> - Added a filter for MFA status <img width="375" height="177" alt="image" src="https://github.com/user-attachments/assets/fd87105e-524d-4ded-b471-769592be96c7" /> ## To test - Can override the content for the `members` network request with the following sample JSON, main thing is just to test that initial load + searching should not run into any significant browser performance issues. [members-response-1000.json](https://github.com/user-attachments/files/33100317/members-response-1000.json) - Can also test on production that this mock response does indeed cause browser performance issues as well
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}