diff --git a/apps/remix/app/components/tables/admin-organisation-overview-table.tsx b/apps/remix/app/components/tables/admin-organisation-overview-table.tsx index 22b3e1c3b..41905a6fa 100644 --- a/apps/remix/app/components/tables/admin-organisation-overview-table.tsx +++ b/apps/remix/app/components/tables/admin-organisation-overview-table.tsx @@ -3,7 +3,7 @@ import { useEffect, useMemo, useState, useTransition } from 'react'; import { msg } from '@lingui/core/macro'; import { useLingui } from '@lingui/react'; import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDown, Loader } from 'lucide-react'; -import { Link } from 'react-router'; +import { Link, useSearchParams } from 'react-router'; import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value'; import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params'; @@ -44,6 +44,7 @@ export const AdminOrganisationOverviewTable = ({ const { _, i18n } = useLingui(); const [isPending, startTransition] = useTransition(); + const [searchParams] = useSearchParams(); const updateSearchParams = useUpdateSearchParams(); const [searchString, setSearchString] = useState(''); const debouncedSearchString = useDebouncedValue(searchString, 1000); @@ -74,7 +75,7 @@ export const AdminOrganisationOverviewTable = ({
{row.getValue('name')} diff --git a/apps/remix/app/components/tables/organisation-insights-table.tsx b/apps/remix/app/components/tables/organisation-insights-table.tsx index c18e382a6..f2d60ef8b 100644 --- a/apps/remix/app/components/tables/organisation-insights-table.tsx +++ b/apps/remix/app/components/tables/organisation-insights-table.tsx @@ -3,6 +3,7 @@ import { useTransition } from 'react'; import { msg } from '@lingui/core/macro'; import { useLingui } from '@lingui/react'; import { Archive, Building2, Loader, TrendingUp, Users } from 'lucide-react'; +import { useNavigation } from 'react-router'; import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params'; import type { OrganisationDetailedInsights } from '@documenso/lib/server-only/admin/get-organisation-detailed-insights'; @@ -33,8 +34,11 @@ export const OrganisationInsightsTable = ({ }: OrganisationInsightsTableProps) => { const { _, i18n } = useLingui(); const [isPending, startTransition] = useTransition(); + const navigation = useNavigation(); const updateSearchParams = useUpdateSearchParams(); + const isLoading = isPending || navigation.state === 'loading'; + const onPaginationChange = (newPage: number, newPerPage: number) => { startTransition(() => { updateSearchParams({ @@ -121,8 +125,12 @@ export const OrganisationInsightsTable = ({ { header: () => {_(msg`Title`)}, accessorKey: 'title', - cell: ({ row }) => {row.getValue('title')}, - size: 240, + cell: ({ row }) => ( + + {row.getValue('title')} + + ), + size: 200, }, { header: () => {_(msg`Status`)}, @@ -130,21 +138,23 @@ export const OrganisationInsightsTable = ({ cell: ({ row }) => ( ), - size: 140, + size: 120, }, { header: () => {_(msg`Team`)}, accessorKey: 'teamName', cell: ({ row }) => ( - {row.getValue('teamName')} + + {row.getValue('teamName')} + ), - size: 180, + size: 150, }, { header: () => {_(msg`Created`)}, accessorKey: 'createdAt', cell: ({ row }) => i18n.date(new Date(row.getValue('createdAt'))), - size: 160, + size: 140, }, { header: () => {_(msg`Completed`)}, @@ -154,7 +164,7 @@ export const OrganisationInsightsTable = ({ return completedAt ? i18n.date(new Date(completedAt)) : '-'; }, - size: 160, + size: 140, }, ] satisfies DataTableColumnDef<(typeof insights.documents)[number]>[]; @@ -231,21 +241,21 @@ export const OrganisationInsightsTable = ({ @@ -253,18 +263,20 @@ export const OrganisationInsightsTable = ({
- - columns={getCurrentColumns()} - data={getCurrentData()} - perPage={perPage} - currentPage={page} - totalPages={insights.totalPages} - onPaginationChange={onPaginationChange} - > - {(table) => } - +
+ + columns={getCurrentColumns()} + data={getCurrentData()} + perPage={perPage} + currentPage={page} + totalPages={insights.totalPages} + onPaginationChange={onPaginationChange} + > + {(table) => } + +
- {isPending && ( + {isLoading && (