rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix page example

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-07 10:56:57 +04:00
parent 97afaed3ec
commit 3df4e22da3
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
contrib/claude/app-arborescence.md
View File

@@ -61,8 +61,8 @@ Each page folder may contain a subset of these files. Names use PascalCase match
| File | Role | | File | Role |
|------|------| |------|------|
| `routes.ts` | Route definitions for this folder. Exports an array spread into the parent route tree. Uses `lazy()` from `@probo/react-lazy` to point at loaders / pages. | | `routes.ts` | Route definitions for this folder. Exports an array spread into the parent route tree. Uses `lazy()` from `@probo/react-lazy` to point at loaders / pages. |
| `MyPageLoader.tsx` | Bundle entry point imported by `lazy()` in the route. **Default export.** Wraps the page in providers and `Suspense`, loads data via Relay, renders a skeleton while loading, then mounts the page with `queryRef`. | | `MyPageLoader.tsx` | Bundle entry point imported by `lazy()` in the route. **Default export.** loads data via Relay, renders a skeleton while loading, then mounts the page with `queryRef`. |
| `MyPage.tsx` | The actual page component. Receives `queryRef` from the loader, calls `usePreloadedQuery`. **Default export.** | | `MyPage.tsx` | The actual page component. Receives `queryRef` from the loader, calls `usePreloadedQuery`. |
| `MyPageSkeleton.tsx` | `Suspense` fallback rendered while the page is still receiving data. Also used as the route-level `Fallback`. | | `MyPageSkeleton.tsx` | `Suspense` fallback rendered while the page is still receiving data. Also used as the route-level `Fallback`. |
| `MyPageError.tsx` | Error boundary rendering component for this page's error state. | | `MyPageError.tsx` | Error boundary rendering component for this page's error state. |
| `_components/` | Sub-components scoped to this page (see [below](#_components-folder)). | | `_components/` | Sub-components scoped to this page (see [below](#_components-folder)). |
@@ -104,11 +104,13 @@ The loader is the **lazy bundle entry point**. It sets up providers, triggers th
```tsx ```tsx
// pages/organizations/vendors/VendorsPageLoader.tsx // pages/organizations/vendors/VendorsPageLoader.tsx
import { Suspense } from "react"; import { Suspense, useEffect } from "react";
import { useQueryLoader } from "react-relay";
import { CoreRelayProvider } from "#/providers/CoreRelayProvider"; import type { VendorsPageQuery } from "#/__generated__/core/VendorsPageQuery.graphql";
import { useOrganizationId } from "#/hooks/useOrganizationId";
import { VendorsPage } from "./VendorsPage"; import VendorsPage, { vendorsPageQuery } from "./VendorsPage";
import { VendorsPageSkeleton } from "./VendorsPageSkeleton"; import { VendorsPageSkeleton } from "./VendorsPageSkeleton";
function VendorsPageQueryLoader() { function VendorsPageQueryLoader() {
@@ -116,22 +118,20 @@ function VendorsPageQueryLoader() {
const [queryRef, loadQuery] = useQueryLoader<VendorsPageQuery>(vendorsPageQuery); const [queryRef, loadQuery] = useQueryLoader<VendorsPageQuery>(vendorsPageQuery);
useEffect(() => { useEffect(() => {
if (!queryRef) { loadQuery({ organizationId });
loadQuery({ organizationId }); }, [loadQuery, organizationId]);
}
});
if (!queryRef) return <VendorsPageSkeleton />; if (!queryRef) {
return <VendorsPageSkeleton />;
}
return <VendorsPage queryRef={queryRef} />; return <VendorsPage queryRef={queryRef} />
} }
export default function VendorsPageLoader() { export default function VendorsPageLoader() {
return ( return (
<CoreRelayProvider> <CoreRelayProvider>
<Suspense fallback={<VendorsPageSkeleton />}> <VendorsPageQueryLoader queryRef={queryRef} />
<VendorsPageQueryLoader />
</Suspense>
</CoreRelayProvider> </CoreRelayProvider>
); );
} }