Skip to content

fixing the virtual mail-list #475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MrgSub merged 10 commits into from
Mar 18, 2025
Merged

fixing the virtual mail-list #475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0a16178
testing with react-scan
ahmetskilinc Mar 16, 2025
08f7649
Merge branch 'staging' into fix/mail-list-reredering-issues
ahmetskilinc Mar 17, 2025
f694a8a
change out list virtualiser - needs work
ahmetskilinc Mar 18, 2025
1d4e224
Apply Prettier format
autofix-ci[bot] Mar 18, 2025
fe3fcf5
delete react-scan
ahmetskilinc Mar 18, 2025
cc2cc16
remove react-scan from package.json
ahmetskilinc Mar 18, 2025
52c4428
switched to virtuoso better performance
ahmetskilinc Mar 18, 2025
a9b0752
fixed
ahmetskilinc Mar 18, 2025
9be250d
Merge branch 'staging' of github.com:Mail-0/Mail-0 into fix/mail-list…
ahmetskilinc Mar 18, 2025
095551c
Apply Prettier format
autofix-ci[bot] Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions apps/mail/components/mail/mail-iframe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { fixNonReadableColors, template } from '@/lib/email-utils';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import { Skeleton } from '../ui/skeleton';
import { Loader2 } from 'lucide-react';
import { useTheme } from 'next-themes';
import { cn } from '@/lib/utils';
Expand Down Expand Up @@ -45,9 +46,24 @@ export function MailIframe({ html }: { html: string }) {
return (
<>
{!loaded && (
<div className="flex h-full w-full items-center justify-center gap-4 p-8">
<Loader2 className="size-4 animate-spin" />
<span>{t('common.mailDisplay.loadingMailContent')}</span>
<div className="flex h-full w-full gap-4 p-4">
<div className="relative inset-0 h-full w-full overflow-y-auto pb-0">
<div className="flex flex-col gap-4">
{/* <Skeleton className="h-[1px] w-full" /> */}
<div className="space-y-4">
<div className="flex flex-col space-y-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-[90%]" />
<Skeleton className="h-4 w-[95%]" />
</div>
<div className="flex flex-col space-y-2">
<Skeleton className="h-4 w-[88%]" />
<Skeleton className="h-4 w-[92%]" />
<Skeleton className="h-4 w-[85%]" />
</div>
</div>
</div>
</div>
</div>
)}
<iframe
Expand Down
115 changes: 38 additions & 77 deletions apps/mail/components/mail/mail-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
'use client';

import type {
ConditionalThreadProps,
InitialThread,
MailListProps,
MailSelectMode,
ThreadProps,
} from '@/types';
import {
type ComponentProps,
memo,
Expand All @@ -16,6 +9,7 @@ import {
useRef,
useState,
} from 'react';
import type { ConditionalThreadProps, InitialThread, MailListProps, MailSelectMode } from '@/types';
import { AlertTriangle, Bell, Briefcase, Tag, User, Users, StickyNote, Pin } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { EmptyState, type FolderType } from '@/components/mail/empty-state';
Expand All @@ -25,14 +19,14 @@ import { useSearchValue } from '@/hooks/use-search-value';
import { markAsRead, markAsUnread } from '@/actions/mail';
import { useTranslations, useFormatter } from 'next-intl';
import { ScrollArea } from '@/components/ui/scroll-area';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useMail } from '@/components/mail/use-mail';
import type { VirtuosoHandle } from 'react-virtuoso';
import { useHotKey } from '@/hooks/use-hot-key';
import { useSession } from '@/lib/auth-client';
import { Badge } from '@/components/ui/badge';
import { useNotes } from '@/hooks/use-notes';
import { useParams } from 'next/navigation';
import { useTheme } from 'next-themes';
import { Virtuoso } from 'react-virtuoso';
import items from './demo.json';
import { toast } from 'sonner';

Expand Down Expand Up @@ -222,7 +216,7 @@ export function MailListDemo({ items: filteredItems = items }) {
);
}

export function MailList({ isCompact }: MailListProps) {
export const MailList = memo(({ isCompact }: MailListProps) => {
const { folder } = useParams<{ folder: string }>();
const [mail, setMail] = useMail();
const { data: session } = useSession();
Expand All @@ -247,34 +241,13 @@ export function MailList({ isCompact }: MailListProps) {
} = useThreads(folder, undefined, searchValue.value, defaultPageSize);

const parentRef = useRef<HTMLDivElement>(null);
const scrollRef = useRef<HTMLDivElement>(null);
const itemHeight = isCompact ? 64 : 96;

const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => scrollRef.current,
estimateSize: useCallback(() => itemHeight, []),
gap: 6,
});

const virtualItems = virtualizer.getVirtualItems();

const handleScroll = useCallback(
(e: React.UIEvent<HTMLDivElement>) => {
if (isLoading || isValidating) return;
const scrollRef = useRef<VirtuosoHandle>(null);

const target = e.target as HTMLDivElement;
const { scrollTop, scrollHeight, clientHeight } = target;
const scrolledToBottom = scrollHeight - (scrollTop + clientHeight) < itemHeight * 2;

if (scrolledToBottom) {
console.log('Loading more items...');
void loadMore();
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[isLoading, isValidating, nextPageToken, itemHeight],
);
const handleScroll = useCallback(() => {
if (isLoading || isValidating) return;
console.log('Loading more items...');
void loadMore();
}, [isLoading, isValidating, loadMore]);

const [massSelectMode, setMassSelectMode] = useState(false);
const [rangeSelectMode, setRangeSelectMode] = useState(false);
Expand Down Expand Up @@ -556,45 +529,33 @@ export function MailList({ isCompact }: MailListProps) {
return <EmptyState folder={folder as FolderType} className="min-h-[90vh] md:min-h-[90vh]" />;
}

const rowRenderer = useCallback(
//TODO: Add proper typing
// @ts-expect-error
(props) => (
<Thread
onClick={handleMailClick}
selectMode={selectMode}
isCompact={isCompact}
sessionData={sessionData}
message={props.data}
{...props}
/>
),
[handleMailClick, selectMode, isCompact, sessionData],
);
Comment on lines +532 to +546
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Added memoized rowRenderer for efficient rendering.

The memoized rowRenderer function is a good pattern for virtualized lists to prevent unnecessary re-renders.

However, there are a few issues to address:

  1. The TODO comment and ts-expect-error should be resolved:
-	//TODO: Add proper typing
-	// @ts-expect-error
+	(index: number, data: InitialThread) => (

This would make the code type-safe and remove the need for the ts-expect-error.

Committable suggestion skipped: line range outside the PR's diff.


return (
<ScrollArea
ref={scrollRef}
className="h-full pb-2"
type="scroll"
onScrollCapture={handleScroll}
>
<div
ref={parentRef}
className={cn('w-full', selectMode === 'range' && 'select-none')}
style={{
height: `${virtualizer.getTotalSize()}px`,
position: 'relative',
}}
>
{virtualItems.map(({ index, key, start }) => {
const item = items[index];
return item ? (
<div
key={key}
style={{
position: 'absolute',
transform: `translateY(${start ?? 0}px)`,
top: 0,
left: 0,
width: '100%',
padding: '8px',
}}
>
<Thread
onClick={handleMailClick}
message={item}
selectMode={selectMode}
isCompact={isCompact}
sessionData={sessionData}
/>
</div>
) : null;
})}
<>
<div ref={parentRef} className={cn('h-full w-full', selectMode === 'range' && 'select-none')}>
<Virtuoso
ref={scrollRef}
style={{ height: '100%' }}
totalCount={items.length}
itemContent={(index: number, data: InitialThread) => rowRenderer({ index, data })}
endReached={handleScroll}
data={items}
/>
</div>
<div className="w-full pt-4 text-center">
{isLoading || isValidating ? (
Expand All @@ -605,9 +566,9 @@ export function MailList({ isCompact }: MailListProps) {
<div className="h-4" />
)}
</div>
</ScrollArea>
</>
);
}
});

const MailLabels = memo(
({ labels }: { labels: string[] }) => {
Expand Down
6 changes: 3 additions & 3 deletions apps/mail/components/mail/mail-skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const MailDisplaySkeleton = ({ isFullscreen }: { isFullscreen?: boolean }
<>
<div
className={cn(
'border-border bg-secondary/50 relative m-4 flex-1 overflow-hidden rounded-lg border p-4',
'relative m-4 flex-1 overflow-hidden',
isFullscreen && 'h-[calc(100vh-4rem)]',
)}
>
Expand Down Expand Up @@ -48,7 +48,7 @@ export const MailDisplaySkeleton = ({ isFullscreen }: { isFullscreen?: boolean }
</div>
<div
className={cn(
'border-border bg-secondary/50 relative m-4 flex-1 overflow-hidden rounded-lg border p-4',
'relative m-4 flex-1 overflow-hidden',
isFullscreen && 'h-[calc(100vh-4rem)]',
)}
>
Expand Down Expand Up @@ -88,7 +88,7 @@ export const MailDisplaySkeleton = ({ isFullscreen }: { isFullscreen?: boolean }
</div>
<div
className={cn(
'border-border bg-secondary/50 relative m-4 flex-1 overflow-hidden rounded-lg border p-4',
'relative m-4 flex-1 overflow-hidden',
isFullscreen && 'h-[calc(100vh-4rem)]',
)}
>
Expand Down
2 changes: 2 additions & 0 deletions apps/mail/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
"@zero/db": "workspace:*",
"@zero/eslint-config": "workspace:*",
"axios": "1.8.1",
"babel-plugin-react-compiler": "^19.0.0-beta-bafa41b-20250307",
"better-auth": "1.2.1",
"canvas-confetti": "1.9.3",
"cheerio": "1.0.0",
Expand Down Expand Up @@ -97,6 +98,7 @@
"react-resizable-panels": "2.1.7",
"react-use": "17.6.0",
"react-use-measure": "^2.1.7",
"react-virtuoso": "^4.12.5",
"react-wrap-balancer": "1.1.1",
"recharts": "2.15.1",
"resend": "4.1.2",
Expand Down
Loading