From c4c7a5f43922ccf5f0e0288c2561aa9e1104936a Mon Sep 17 00:00:00 2001 From: Michael Herzner Date: Thu, 7 Sep 2023 00:03:04 +0200 Subject: [PATCH] perf: use `rel=preload` for pages that perform fetching (#520) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes #515. applied `link`s as suggested, yet additionally had to add `crossOrigin="anonymous"` to resolve the following warning in the console: ![Bildschirm­foto 2023-09-06 um 22 08 24](https://github.com/denoland/saaskit/assets/8133892/d28f93f4-c090-4539-ae08-b885928f7265) also homogenized the components using `fetch` to have an `endpoint` prop --- islands/CommentsList.tsx | 3 +-- islands/NotificationsList.tsx | 3 +-- islands/UsersTable.tsx | 3 +-- routes/dashboard/users.tsx | 13 +++++++++++-- routes/index.tsx | 13 +++++++++++-- routes/items/[id].tsx | 12 ++++++++++-- routes/notifications/index.tsx | 13 +++++++++++-- routes/users/[login].tsx | 9 ++++++++- 8 files changed, 54 insertions(+), 15 deletions(-) diff --git a/islands/CommentsList.tsx b/islands/CommentsList.tsx index cb3a75d52c42..9423f84e7535 100644 --- a/islands/CommentsList.tsx +++ b/islands/CommentsList.tsx @@ -16,11 +16,10 @@ function CommentSummary(props: Comment) { ); } -export default function CommentsList(props: { itemId: string }) { +export default function CommentsList({ endpoint }: { endpoint: string }) { const commentsSig = useSignal([]); const cursorSig = useSignal(""); const isLoadingSig = useSignal(false); - const endpoint = `/api/items/${props.itemId}/comments`; async function loadMoreComments() { if (isLoadingSig.value) return; diff --git a/islands/NotificationsList.tsx b/islands/NotificationsList.tsx index fecc363c3ff4..9ce3348d7856 100644 --- a/islands/NotificationsList.tsx +++ b/islands/NotificationsList.tsx @@ -24,11 +24,10 @@ function NotificationSummary(props: Notification) { ); } -export default function NotificationsList() { +export default function NotificationsList({ endpoint }: { endpoint: string }) { const notificationsSig = useSignal([]); const cursorSig = useSignal(""); const isLoadingSig = useSignal(false); - const endpoint = `/api/me/notifications`; async function loadMoreNotifications() { if (isLoadingSig.value) return; diff --git a/islands/UsersTable.tsx b/islands/UsersTable.tsx index 48522cd63f6c..6f0160f04eb0 100644 --- a/islands/UsersTable.tsx +++ b/islands/UsersTable.tsx @@ -31,11 +31,10 @@ function UserTableRow(props: User) { ); } -export default function UsersTable() { +export default function UsersTable({ endpoint }: { endpoint: string }) { const usersSig = useSignal([]); const cursorSig = useSignal(""); const isLoadingSig = useSignal(false); - const endpoint = "/api/users"; async function loadMoreUsers() { if (isLoadingSig.value) return; diff --git a/routes/dashboard/users.tsx b/routes/dashboard/users.tsx index d8aa31e718dd..d053a064a205 100644 --- a/routes/dashboard/users.tsx +++ b/routes/dashboard/users.tsx @@ -10,9 +10,18 @@ export default async function DashboardUsersPage( _req: Request, ctx: RouteContext, ) { + const endpoint = "/api/users"; + return ( <> - + + +

Dashboard

- +
); diff --git a/routes/index.tsx b/routes/index.tsx index 99229180a478..8a67ef019f77 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -45,12 +45,21 @@ export default async function HomePage( _req: Request, ctx: RouteContext, ) { + const endpoint = "/api/items"; + return ( <> - + + +
{NEEDS_SETUP && } - +
); diff --git a/routes/items/[id].tsx b/routes/items/[id].tsx index 7d1f7dd909e9..5bb0f884762c 100644 --- a/routes/items/[id].tsx +++ b/routes/items/[id].tsx @@ -33,6 +33,7 @@ export default async function ItemsItemPage( const item = await getItem(itemId); if (item === null) return await ctx.renderNotFound(); + const endpoint = `/api/items/${ctx.params.id}/comments`; const isSignedIn = ctx.state.sessionUser !== undefined; let isVoted = false; @@ -46,14 +47,21 @@ export default async function ItemsItemPage( return ( <> - + + +
- +
); diff --git a/routes/notifications/index.tsx b/routes/notifications/index.tsx index f3cbb8df3967..e708c71f1040 100644 --- a/routes/notifications/index.tsx +++ b/routes/notifications/index.tsx @@ -10,12 +10,21 @@ export default async function NotificationsPage( _req: Request, ctx: RouteContext, ) { + const endpoint = "/api/me/notifications"; + return ( <> - + + +

Notifications

- +
); diff --git a/routes/users/[login].tsx b/routes/users/[login].tsx index dc1a9533c5d7..53c2599e2b17 100644 --- a/routes/users/[login].tsx +++ b/routes/users/[login].tsx @@ -48,7 +48,14 @@ export default async function UsersUserPage( return ( <> - + + +