fix: keep previous table data during pagination to avoid skeleton flash

This commit is contained in:
ephraimduncan
2026-07-07 09:07:43 +00:00
parent 50f272be87
commit 5eab99e8d4
11 changed files with 103 additions and 55 deletions
@@ -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({
@@ -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({
@@ -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({
@@ -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({
@@ -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({
@@ -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({
@@ -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 [
@@ -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({
@@ -91,6 +91,7 @@ export default function DocumentsPage() {
folderId,
},
{
placeholderData: (previousData) => previousData,
...SKIP_QUERY_BATCH_META,
},
);
@@ -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.
@@ -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,
},
);