apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-08 20:25:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: improve skeleton loading UI and enhance dropdown menu styles for better user experience

Browse source
This commit is contained in:
Anish Sarkar 2026-03-08 17:52:53 +05:30
parent 5ce3790847
commit 2ac0e4f931
1 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

25
surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
View file

@ -138,6 +138,7 @@ function getAvatarInitials(member: Membership): string {
} }
const PAGE_SIZE = 5; const PAGE_SIZE = 5;
const SKELETON_KEYS = Array.from({ length: PAGE_SIZE }, (_, i) => `skeleton-${i}`);
export default function TeamManagementPage() { export default function TeamManagementPage() {
const params = useParams(); const params = useParams();
@ -290,9 +291,9 @@ export default function TeamManagementPage() {
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{Array.from({ length: PAGE_SIZE }).map((_, i) => ( {SKELETON_KEYS.map((id) => (
<TableRow <TableRow
key={`skeleton-${i}`} key={id}
className="border-b border-border/40 hover:bg-transparent" className="border-b border-border/40 hover:bg-transparent"
> >
<TableCell className="w-[45%] py-2.5 px-4 md:px-6 border-r border-border/40"> <TableCell className="w-[45%] py-2.5 px-4 md:px-6 border-r border-border/40">
@ -564,7 +565,7 @@ function MemberRow({
<DropdownMenuContent <DropdownMenuContent
align="end" align="end"
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}
className="min-w-[120px]" className="min-w-[120px] dark:bg-neutral-900 dark:border dark:border-white/5"
> >
{canManageRoles && {canManageRoles &&
roles roles
@ -607,12 +608,12 @@ function MemberRow({
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
)} )}
<DropdownMenuSeparator /> <DropdownMenuSeparator className="dark:bg-white/5" />
<DropdownMenuItem <DropdownMenuItem
onClick={() => onClick={() =>
router.push(`/dashboard/${searchSpaceId}/settings?section=team-roles`) router.push(`/dashboard/${searchSpaceId}/settings?section=team-roles`)
} }
> >
Manage Roles Manage Roles
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
@ -876,10 +877,10 @@ function AllInvitesDialog({
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="outline" className="gap-2"> <Button variant="secondary" className="gap-2">
<Link2 className="h-4 w-4 rotate-315" /> <Link2 className="h-4 w-4 rotate-315" />
Active invites Active invites
<span className="inline-flex items-center justify-center h-5 min-w-5 px-1 rounded-full bg-muted text-xs font-medium"> <span className="inline-flex items-center justify-center h-5 min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200 text-xs font-medium">
{invites.length} {invites.length}
</span> </span>
</Button> </Button>