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

panel 2 courier api restore

Browse Source
This commit is contained in:
alma 2025-04-25 20:57:49 +02:00
parent 61122401a9
commit 33c6fe709a
1 changed files with 77 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
app/courrier/page.tsx
View File

@ -582,6 +582,33 @@ export default function CourrierPage() {
return emails.find(email => email.id === selectedEmail?.id);
};
// Add an effect to detect and fix stuck loading states
useEffect(() => {
let timeoutId: NodeJS.Timeout | null = null;
// If we have emails but loading state is still true after emails load, it's likely stuck
if (emails.length > 0 && (loading || isLoadingInitial)) {
console.log('[DEBUG] Detected potential stuck loading state, setting recovery timeout');
// Set a timeout to automatically reset the loading state
timeoutId = setTimeout(() => {
// Double check if still stuck
if (emails.length > 0 && (loading || isLoadingInitial)) {
console.log('[DEBUG] Confirmed stuck loading state, auto-resetting');
setLoading(false);
setIsLoadingInitial(false);
}
}, 3000); // 3 second timeout
}
// Cleanup
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
};
}, [emails.length, loading, isLoadingInitial]);
// Single initialization effect that loads emails correctly on first page load
useEffect(() => {
const loadInitialData = async () => {
@ -817,8 +844,11 @@ export default function CourrierPage() {
setError(err instanceof Error ? err.message : 'Failed to load data');
} finally {
console.log('[DEBUG] Setting loading state to false in finally block');
setLoading(false);
setIsLoadingInitial(false);
// Ensure we reset the loading state after a short delay to make sure React has processed state updates
setTimeout(() => {
setLoading(false);
setIsLoadingInitial(false);
}, 100);
}
};
@ -1049,19 +1079,25 @@ export default function CourrierPage() {
className="flex-1 overflow-y-auto"
onScroll={handleScroll}
>
{/* Only show loading if we don't have emails yet - this prevents stuck loading states */}
{(loading || isLoadingInitial) && filteredEmails.length === 0 ? (
{/* Always show emails when available, regardless of loading state */}
{filteredEmails.length > 0 ? (
<div className="divide-y divide-gray-100">
{filteredEmails.map((email) => renderEmailListItem(email))}
{(isLoadingMore || loading) && (
<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 mr-2"></div>
<span className="text-xs text-gray-500">Refreshing...</span>
</div>
)}
</div>
) : isLoadingInitial || (loading && emails.length === 0) ? (
<div className="flex items-center justify-center h-64">
<div className="flex flex-col items-center">
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
<p className="text-sm text-gray-500">Loading emails...</p>
<p className="text-xs text-gray-400 mt-2">
{loading ? 'Loading state: true' : ''}
{isLoadingInitial ? 'Loading initial: true' : ''}
</p>
</div>
</div>
) : filteredEmails.length === 0 ? (
) : (
<div className="flex flex-col items-center justify-center h-64">
<Mail className="h-12 w-12 text-gray-400 mb-3" />
<p className="text-gray-700 text-base font-medium mb-1">
@ -1085,22 +1121,6 @@ export default function CourrierPage() {
<RefreshCw className="h-4 w-4 mr-2" /> Refresh Folder
</Button>
</div>
) : (
<div className="divide-y divide-gray-100">
{filteredEmails.map((email) => renderEmailListItem(email))}
{isLoadingMore && (
<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>
)}
{/* Show loading indicator at the bottom if we're still loading but have emails */}
{(loading || isLoadingInitial) && filteredEmails.length > 0 && (
<div className="sticky bottom-0 bg-white bg-opacity-90 py-2 px-4 text-xs text-center text-gray-500 flex items-center justify-center">
<div className="animate-spin rounded-full h-3 w-3 border-t-2 border-b-2 border-blue-500 mr-2"></div>
Refreshing email list...
</div>
)}
</div>
)}
</div>
</div>
@ -1857,9 +1877,12 @@ export default function CourrierPage() {
setError('Failed to load emails');
} finally {
console.log('[DEBUG] Setting loading states to false in loadEmails finally block');
setLoading(false);
setIsLoadingMore(false);
setIsLoadingInitial(false);
// Ensure we reset the loading state after a short delay to make sure React has processed state updates
setTimeout(() => {
setLoading(false);
setIsLoadingMore(false);
setIsLoadingInitial(false);
}, 100);
}
};
@ -1969,6 +1992,32 @@ export default function CourrierPage() {
fetchImapCredentials();
}, []);
// Add ref for tracking component mount status
const isComponentMounted = useRef(true);
// Add a cleanup effect to reset states on unmount/remount
useEffect(() => {
// Reset isComponentMounted value on mount
isComponentMounted.current = true;
// Reset loading states when component mounts
const timeoutId = setTimeout(() => {
if (isComponentMounted.current && (loading || isLoadingInitial)) {
console.log('[DEBUG] Reset loading states on mount');
setLoading(false);
setIsLoadingInitial(false);
}
}, 5000); // Longer timeout to avoid race conditions
// Return cleanup function
return () => {
console.log('[DEBUG] Component unmounting, clearing states');
isComponentMounted.current = false;
clearTimeout(timeoutId);
// No need to set states during unmount as component is gone
};
}, []); // Empty dependency array
if (error) {
return (
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">