alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier formatting

Browse Source
This commit is contained in:
alma 2025-04-30 16:45:45 +02:00
parent 2cceb8961f
commit 98413f87ee
1 changed files with 9 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/email/EmailList.tsx
View File

@ -1,6 +1,6 @@
'use client'; 'use client';
import React, { useState, useEffect, useRef } from 'react'; import React, { useState } from 'react';
import { Loader2, Mail, Search, X } from 'lucide-react'; import { Loader2, Mail, Search, X } from 'lucide-react';
import { Email } from '@/hooks/use-courrier'; import { Email } from '@/hooks/use-courrier';
import EmailListItem from './EmailListItem'; import EmailListItem from './EmailListItem';
@ -43,15 +43,6 @@ export default function EmailList({
}: EmailListProps) { }: EmailListProps) {
const [scrollPosition, setScrollPosition] = useState(0); const [scrollPosition, setScrollPosition] = useState(0);
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const listRef = useRef<HTMLDivElement>(null);
const isLoadingMoreRef = useRef(false);
// Reset loading state when isLoading changes
useEffect(() => {
if (!isLoading) {
isLoadingMoreRef.current = false;
}
}, [isLoading]);
// Handle scroll to detect when user reaches the bottom // Handle scroll to detect when user reaches the bottom
const handleScroll = (event: React.UIEvent<HTMLDivElement>) => { const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
@ -63,37 +54,13 @@ export default function EmailList({
// Calculate how close to the bottom we are (in pixels) // Calculate how close to the bottom we are (in pixels)
const distanceToBottom = scrollHeight - scrollTop - clientHeight; const distanceToBottom = scrollHeight - scrollTop - clientHeight;
// Debug logging to help diagnose scrolling issues // More aggressive threshold - load more when within 300px of bottom
console.log(`[EMAIL_LIST] Scroll metrics - scrollHeight: ${scrollHeight}, scrollTop: ${scrollTop}, clientHeight: ${clientHeight}, distanceToBottom: ${distanceToBottom}`); // Only trigger if we have more emails and aren't already loading
if (distanceToBottom < 300 && hasMoreEmails && !isLoading) {
// Only trigger if we have more emails, aren't already loading, and we're near the bottom console.log(`[EMAIL_LIST] Near bottom (${distanceToBottom}px), loading more emails`);
const LOAD_MORE_THRESHOLD = 400; // Increased threshold for more reliable loading
if (distanceToBottom < LOAD_MORE_THRESHOLD && hasMoreEmails && !isLoading && !isLoadingMoreRef.current) {
console.log(`[EMAIL_LIST] Near bottom (${distanceToBottom}px), loading more emails. hasMoreEmails: ${hasMoreEmails}, isLoading: ${isLoading}`);
isLoadingMoreRef.current = true; // Prevent multiple load more triggers
onLoadMore(); onLoadMore();
} }
}; };
// Also check on component mount and email changes if we need to load more
useEffect(() => {
if (!listRef.current) return;
const checkScroll = () => {
const { scrollHeight, clientHeight } = listRef.current as HTMLDivElement;
// If the content doesn't fill the container, and we have more to load
if (scrollHeight <= clientHeight && hasMoreEmails && !isLoading && !isLoadingMoreRef.current) {
console.log("[EMAIL_LIST] Content doesn't fill container, loading more emails");
isLoadingMoreRef.current = true;
onLoadMore();
}
};
// Check after render and when emails change
requestAnimationFrame(checkScroll);
}, [emails, hasMoreEmails, isLoading, onLoadMore]);
// Handle search // Handle search
const handleSearch = (e: React.FormEvent) => { const handleSearch = (e: React.FormEvent) => {
@ -182,8 +149,7 @@ export default function EmailList({
)} )}
<div <div
ref={listRef} className="flex-1 overflow-y-auto"
className="flex-1 overflow-y-auto scroll-smooth"
onScroll={handleScroll} onScroll={handleScroll}
> >
<div className="divide-y divide-gray-100"> <div className="divide-y divide-gray-100">
@ -205,18 +171,9 @@ export default function EmailList({
/> />
))} ))}
{/* Make loading indicator more visible */} {isLoading && emails.length > 0 && (
{isLoading && ( <div className="flex items-center justify-center p-4">
<div className="flex items-center justify-center p-4 bg-gray-50"> <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
<Loader2 className="h-5 w-5 text-blue-500 animate-spin mr-2" />
<span className="text-sm text-gray-600">Loading more emails...</span>
</div>
)}
{/* Visual indicator when all emails are loaded */}
{!hasMoreEmails && emails.length > 0 && (
<div className="p-3 text-center text-xs text-gray-500 bg-gray-50">
End of emails in this folder
</div> </div>
)} )}
</div> </div>