From 5eab99e8d4902dae95acdb2d5c1fdbbfb2a60cca Mon Sep 17 00:00:00 2001 From: ephraimduncan Date: Tue, 7 Jul 2026 09:07:43 +0000 Subject: [PATCH] fix: keep previous table data during pagination to avoid skeleton flash --- .../components/tables/admin-claims-table.tsx | 15 ++++++++---- .../tables/admin-document-jobs-table.tsx | 15 ++++++++---- .../tables/admin-email-transports-table.tsx | 15 ++++++++---- .../tables/admin-organisation-stats-table.tsx | 23 +++++++++++-------- .../tables/admin-organisations-table.tsx | 19 +++++++++------ .../tables/admin-user-teams-table.tsx | 17 +++++++++----- .../app/components/tables/inbox-table.tsx | 13 +++++++---- .../tables/organisation-teams-table.tsx | 17 +++++++++----- .../t.$teamUrl+/documents._index.tsx | 1 + .../settings.webhooks.$id._index.tsx | 21 ++++++++++------- .../t.$teamUrl+/templates._index.tsx | 2 ++ 11 files changed, 103 insertions(+), 55 deletions(-) diff --git a/apps/remix/app/components/tables/admin-claims-table.tsx b/apps/remix/app/components/tables/admin-claims-table.tsx index b569fd6bf..d250cef65 100644 --- a/apps/remix/app/components/tables/admin-claims-table.tsx +++ b/apps/remix/app/components/tables/admin-claims-table.tsx @@ -38,11 +38,16 @@ export const AdminClaimsTable = ({ licenseFlags }: AdminClaimsTableProps) => { const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? [])); - const { data, isLoading, isLoadingError } = trpc.admin.claims.find.useQuery({ - query: parsedSearchParams.query, - page: parsedSearchParams.page, - perPage: parsedSearchParams.perPage, - }); + const { data, isLoading, isLoadingError } = trpc.admin.claims.find.useQuery( + { + query: parsedSearchParams.query, + page: parsedSearchParams.page, + perPage: parsedSearchParams.perPage, + }, + { + placeholderData: (previousData) => previousData, + }, + ); const onPaginationChange = (page: number, perPage: number) => { updateSearchParams({ diff --git a/apps/remix/app/components/tables/admin-document-jobs-table.tsx b/apps/remix/app/components/tables/admin-document-jobs-table.tsx index 40c26781b..699af515a 100644 --- a/apps/remix/app/components/tables/admin-document-jobs-table.tsx +++ b/apps/remix/app/components/tables/admin-document-jobs-table.tsx @@ -19,11 +19,16 @@ export const AdminDocumentJobsTable = ({ envelopeId }: { envelopeId: string }) = const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? [])); - const { data, isLoading, isLoadingError, refetch, isFetching } = trpc.admin.document.findJobs.useQuery({ - envelopeId: envelopeId, - page: parsedSearchParams.page, - perPage: parsedSearchParams.perPage, - }); + const { data, isLoading, isLoadingError, refetch, isFetching } = trpc.admin.document.findJobs.useQuery( + { + envelopeId: envelopeId, + page: parsedSearchParams.page, + perPage: parsedSearchParams.perPage, + }, + { + placeholderData: (previousData) => previousData, + }, + ); const onPaginationChange = (page: number, perPage: number) => { updateSearchParams({ diff --git a/apps/remix/app/components/tables/admin-email-transports-table.tsx b/apps/remix/app/components/tables/admin-email-transports-table.tsx index 9b4fff07f..6e1ea26ed 100644 --- a/apps/remix/app/components/tables/admin-email-transports-table.tsx +++ b/apps/remix/app/components/tables/admin-email-transports-table.tsx @@ -30,11 +30,16 @@ export const AdminEmailTransportsTable = () => { const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? [])); - const { data, isLoading, isLoadingError } = trpc.admin.emailTransport.find.useQuery({ - query: parsedSearchParams.query, - page: parsedSearchParams.page, - perPage: parsedSearchParams.perPage, - }); + const { data, isLoading, isLoadingError } = trpc.admin.emailTransport.find.useQuery( + { + query: parsedSearchParams.query, + page: parsedSearchParams.page, + perPage: parsedSearchParams.perPage, + }, + { + placeholderData: (previousData) => previousData, + }, + ); const onPaginationChange = (page: number, perPage: number) => { updateSearchParams({ diff --git a/apps/remix/app/components/tables/admin-organisation-stats-table.tsx b/apps/remix/app/components/tables/admin-organisation-stats-table.tsx index d3233bacf..54e47de2a 100644 --- a/apps/remix/app/components/tables/admin-organisation-stats-table.tsx +++ b/apps/remix/app/components/tables/admin-organisation-stats-table.tsx @@ -77,15 +77,20 @@ export const AdminOrganisationStatsTable = ({ displayMode = 'usage' }: AdminOrga const orderByColumn = parseOrderByColumn(searchParams?.get('orderByColumn') ?? undefined); const orderByDirection = parseOrderByDirection(searchParams?.get('orderByDirection') ?? undefined); - const { data, isLoading, isLoadingError } = trpc.admin.organisation.stats.find.useQuery({ - query: parsedSearchParams.query, - page: parsedSearchParams.page, - perPage: parsedSearchParams.perPage, - period, - claimId, - orderByColumn, - orderByDirection, - }); + const { data, isLoading, isLoadingError } = trpc.admin.organisation.stats.find.useQuery( + { + query: parsedSearchParams.query, + page: parsedSearchParams.page, + perPage: parsedSearchParams.perPage, + period, + claimId, + orderByColumn, + orderByDirection, + }, + { + placeholderData: (previousData) => previousData, + }, + ); const onPaginationChange = (page: number, perPage: number) => { updateSearchParams({ diff --git a/apps/remix/app/components/tables/admin-organisations-table.tsx b/apps/remix/app/components/tables/admin-organisations-table.tsx index ee336af8d..e0367f745 100644 --- a/apps/remix/app/components/tables/admin-organisations-table.tsx +++ b/apps/remix/app/components/tables/admin-organisations-table.tsx @@ -55,13 +55,18 @@ export const AdminOrganisationsTable = ({ const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? [])); - const { data, isLoading, isLoadingError } = trpc.admin.organisation.find.useQuery({ - query: parsedSearchParams.query, - page: parsedSearchParams.page, - perPage: parsedSearchParams.perPage, - ownerUserId, - memberUserId, - }); + const { data, isLoading, isLoadingError } = trpc.admin.organisation.find.useQuery( + { + query: parsedSearchParams.query, + page: parsedSearchParams.page, + perPage: parsedSearchParams.perPage, + ownerUserId, + memberUserId, + }, + { + placeholderData: (previousData) => previousData, + }, + ); const onPaginationChange = (page: number, perPage: number) => { updateSearchParams({ diff --git a/apps/remix/app/components/tables/admin-user-teams-table.tsx b/apps/remix/app/components/tables/admin-user-teams-table.tsx index 901205b1c..7d4a6adb4 100644 --- a/apps/remix/app/components/tables/admin-user-teams-table.tsx +++ b/apps/remix/app/components/tables/admin-user-teams-table.tsx @@ -28,12 +28,17 @@ export const AdminUserTeamsTable = ({ userId }: AdminUserTeamsTableProps) => { const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? [])); - const { data, isLoading, isLoadingError } = trpc.admin.user.findTeams.useQuery({ - userId, - query: parsedSearchParams.query, - page: parsedSearchParams.page, - perPage: parsedSearchParams.perPage, - }); + const { data, isLoading, isLoadingError } = trpc.admin.user.findTeams.useQuery( + { + userId, + query: parsedSearchParams.query, + page: parsedSearchParams.page, + perPage: parsedSearchParams.perPage, + }, + { + placeholderData: (previousData) => previousData, + }, + ); const onPaginationChange = (page: number, perPage: number) => { updateSearchParams({ diff --git a/apps/remix/app/components/tables/inbox-table.tsx b/apps/remix/app/components/tables/inbox-table.tsx index f958da66d..b7e00a577 100644 --- a/apps/remix/app/components/tables/inbox-table.tsx +++ b/apps/remix/app/components/tables/inbox-table.tsx @@ -46,10 +46,15 @@ export const InboxTable = () => { const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined; const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined; - const { data, isLoading, isLoadingError } = trpc.document.inbox.find.useQuery({ - page: page || 1, - perPage: perPage || 10, - }); + const { data, isLoading, isLoadingError } = trpc.document.inbox.find.useQuery( + { + page: page || 1, + perPage: perPage || 10, + }, + { + placeholderData: (previousData) => previousData, + }, + ); const columns = useMemo(() => { return [ diff --git a/apps/remix/app/components/tables/organisation-teams-table.tsx b/apps/remix/app/components/tables/organisation-teams-table.tsx index 86d1e2161..d4b01b2b4 100644 --- a/apps/remix/app/components/tables/organisation-teams-table.tsx +++ b/apps/remix/app/components/tables/organisation-teams-table.tsx @@ -28,12 +28,17 @@ export const OrganisationTeamsTable = () => { const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? [])); - const { data, isLoading, isLoadingError } = trpc.team.find.useQuery({ - organisationId: organisation.id, - query: parsedSearchParams.query, - page: parsedSearchParams.page, - perPage: parsedSearchParams.perPage, - }); + const { data, isLoading, isLoadingError } = trpc.team.find.useQuery( + { + organisationId: organisation.id, + query: parsedSearchParams.query, + page: parsedSearchParams.page, + perPage: parsedSearchParams.perPage, + }, + { + placeholderData: (previousData) => previousData, + }, + ); const onPaginationChange = (page: number, perPage: number) => { updateSearchParams({ diff --git a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx index 854283075..87089472e 100644 --- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx +++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx @@ -91,6 +91,7 @@ export default function DocumentsPage() { folderId, }, { + placeholderData: (previousData) => previousData, ...SKIP_QUERY_BATCH_META, }, ); diff --git a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx index eb70040e7..ad9c586f4 100644 --- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx +++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx @@ -72,14 +72,19 @@ export default function WebhookPage({ params }: Route.ComponentProps) { data, isLoading: isLogsLoading, isLoadingError: isLogsLoadingError, - } = trpc.webhook.calls.find.useQuery({ - webhookId: params.id, - page: parsedSearchParams.page, - perPage: parsedSearchParams.perPage, - status: parsedSearchParams.status, - events: parsedSearchParams.events, - query: parsedSearchParams.query, - }); + } = trpc.webhook.calls.find.useQuery( + { + webhookId: params.id, + page: parsedSearchParams.page, + perPage: parsedSearchParams.perPage, + status: parsedSearchParams.status, + events: parsedSearchParams.events, + query: parsedSearchParams.query, + }, + { + placeholderData: (previousData) => previousData, + }, + ); /** * Handle debouncing the search query. diff --git a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx index 9dff4974c..c1eb8273b 100644 --- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx +++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx @@ -66,6 +66,7 @@ export default function TemplatesPage() { }, { enabled: !isOrgView, + placeholderData: (previousData) => previousData, }, ); @@ -76,6 +77,7 @@ export default function TemplatesPage() { }, { enabled: isOrgView, + placeholderData: (previousData) => previousData, }, );