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';
import React, { useState, useEffect, useRef } from 'react';
import React, { useState } from 'react';
import { Loader2, Mail, Search, X } from 'lucide-react';
import { Email } from '@/hooks/use-courrier';
import EmailListItem from './EmailListItem';
@ -43,15 +43,6 @@ export default function EmailList({
}: EmailListProps) {
const [scrollPosition, setScrollPosition] = useState(0);
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
const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
@ -63,37 +54,13 @@ export default function EmailList({
// Calculate how close to the bottom we are (in pixels)
const distanceToBottom = scrollHeight - scrollTop - clientHeight;
// Debug logging to help diagnose scrolling issues
console.log(`[EMAIL_LIST] Scroll metrics - scrollHeight: ${scrollHeight}, scrollTop: ${scrollTop}, clientHeight: ${clientHeight}, distanceToBottom: ${distanceToBottom}`);
// Only trigger if we have more emails, aren't already loading, and we're near the bottom
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
// More aggressive threshold - load more when within 300px of bottom
// Only trigger if we have more emails and aren't already loading
if (distanceToBottom < 300 && hasMoreEmails && !isLoading) {
console.log(`[EMAIL_LIST] Near bottom (${distanceToBottom}px), loading more emails`);
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
const handleSearch = (e: React.FormEvent) => {
@ -182,8 +149,7 @@ export default function EmailList({
)}
<div
ref={listRef}
className="flex-1 overflow-y-auto scroll-smooth"
className="flex-1 overflow-y-auto"
onScroll={handleScroll}
>
<div className="divide-y divide-gray-100">
@ -205,18 +171,9 @@ export default function EmailList({
/>
))}
{/* Make loading indicator more visible */}
{isLoading && (
<div className="flex items-center justify-center p-4 bg-gray-50">
<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
{isLoading && emails.length > 0 && (
<div className="flex items-center justify-center p-4">
<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
</div>
)}
</div>