mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 05:09:12 +03:00
Charis
13c4b1584c
* fix(policies search): replace useUrlState with nuqs There is a bug when typing quickly into the search field on the policies page: because useUrlState naively uses router.replace, which is asynchronous, the search term can get corrupted, e.g., searching for "dummy" might end up with a final value of "dum". Switched to nuqs for better handling. * perf(policies page): memoize and optimize for projects with many tables A project with hundreds of tables will have extremely slow search performance for the policies page, because of heavy rerendering. Made some optimizations: - Memoized to reduce rerendering - Hid filtered-out tables instead of unmounting, so we don't have to remount when the search is cleared * refactor(policies page): pass policies info through context Avoid having a mess of props by creating a PoliciesDataContext to share policy information. * cleanup(policies pages): minor code cleanup, no user-facing changes
Writing pages
Rough guidelines
- Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder
components/interfaces/xxx/...(Refer to the README.md under the components folder) - Keep to using
useStatehooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'
// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'
// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'
// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'
// Name your page accordingly
const Page: NextPage = () => {
return (
<Layout>
<div>Page content</div>
</Layout>
)
}
export default withAuth(Page)