Saeed0920/inogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix the scroll infinite in this version

Browse Source
This commit is contained in:
Saeed AB 2025-09-24 14:08:34 +03:30
parent 585e66570d
commit 31fa601ab2
6 changed files with 91 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/dashboard/dashboard-home.tsx
View File

@ -230,7 +230,7 @@ export function DashboardHome() {
style={{ height: `${Math.random() * 80 + 20}%` }}
></div>
<div
className="w-full bg-green-400/30 rounded-t-sm"
className="w-full bg-pr-green rounded-t-sm"
style={{ height: `${Math.random() * 80 + 20}%` }}
></div>
<div
@ -378,7 +378,7 @@ export function DashboardHome() {
gridType="circle"
radialLines={false}
stroke="none"
className="first:fill-red-400 last:fill-[#24273A]"
className="first:fill-pr-red last:fill-[#24273A]"
polarRadius={[38, 31]}
/>
<RadialBar
@ -506,7 +506,7 @@ export function DashboardHome() {
gridType="circle"
radialLines={false}
stroke="none"
className="first:fill-red-400 last:fill-[#24273A]"
className="first:fill-pr-red last:fill-[#24273A]"
polarRadius={[38, 31]}
/>
<RadialBar
@ -734,7 +734,7 @@ export function DashboardHome() {
</div>
<div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2">
<Book className="w-4 h-4 text-green-400" />
<Book className="w-4 h-4 text-pr-green" />
<span className="text-sm">مقاله:</span>
</div>
<span className="text-base font-bold ">
@ -791,7 +791,7 @@ export function DashboardHome() {
</div>
<div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2">
<Book className="w-4 h-4 text-green-400" />
<Book className="w-4 h-4 text-pr-green" />
<span className="text-sm">برگزاری رویداد:</span>
</div>
<span className="text-base font-bold ">

35
app/components/dashboard/project-management/digital-innovation-page.tsx
View File

@ -181,6 +181,8 @@ export function DigitalInnovationPage() {
// const [avarage, setAvarage] = useState<number>(0);
const observerRef = useRef<HTMLDivElement>(null);
const fetchingRef = useRef(false);
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null);
// Selection handlers
const handleSelectAll = () => {
@ -346,10 +348,10 @@ export function DigitalInnovationPage() {
};
const loadMore = useCallback(() => {
if (hasMore && !loading) {
if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
setCurrentPage((prev) => prev + 1);
}
}, [hasMore, loading]);
}, [hasMore, loading, loadingMore]);
useEffect(() => {
fetchTable(true);
@ -363,28 +365,41 @@ export function DigitalInnovationPage() {
}
}, [currentPage]);
// Infinite scroll observer with debouncing
useEffect(() => {
const scrollContainer = document.querySelector(".overflow-auto");
const scrollContainer = scrollContainerRef.current;
const handleScroll = () => {
if (!scrollContainer || !hasMore) return;
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) return;
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
if (scrollPercentage == 1) {
loadMore();
// Clear previous timeout
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
// Debounce scroll events
scrollTimeoutRef.current = setTimeout(() => {
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
// Trigger load more when scrolled to 95% of the container
if (scrollPercentage >= 0.95) {
loadMore();
}
}, 150);
};
if (scrollContainer) {
scrollContainer.addEventListener("scroll", handleScroll);
scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
}
return () => {
if (scrollContainer) {
scrollContainer.removeEventListener("scroll", handleScroll);
}
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
};
}, [loadMore, hasMore, loadingMore]);

39
app/components/dashboard/project-management/mange-ideas-tech-page.tsx
View File

@ -244,6 +244,8 @@ export function ManageIdeasTechPage() {
});
const observerRef = useRef<HTMLDivElement>(null);
const fetchingRef = useRef(false);
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null);
const fetchProjects = async (reset = false) => {
// Prevent concurrent API calls
@ -341,10 +343,10 @@ export function ManageIdeasTechPage() {
};
const loadMore = useCallback(() => {
if (hasMore && !loading) {
if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
setCurrentPage((prev) => prev + 1);
}
}, [hasMore, loading]);
}, [hasMore, loading, loadingMore]);
useEffect(() => {
fetchProjects(true);
@ -357,30 +359,41 @@ export function ManageIdeasTechPage() {
}
}, [currentPage]);
// Infinite scroll observer
// Infinite scroll observer with debouncing
useEffect(() => {
const scrollContainer = document.querySelector(".overflow-auto");
const scrollContainer = scrollContainerRef.current;
const handleScroll = () => {
if (!scrollContainer || !hasMore) return;
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) return;
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
// Trigger load more when scrolled to 90% of the container
if (scrollPercentage == 1) {
loadMore();
// Clear previous timeout
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
// Debounce scroll events
scrollTimeoutRef.current = setTimeout(() => {
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
// Trigger load more when scrolled to 95% of the container
if (scrollPercentage >= 0.95) {
loadMore();
}
}, 150);
};
if (scrollContainer) {
scrollContainer.addEventListener("scroll", handleScroll);
scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
}
return () => {
if (scrollContainer) {
scrollContainer.removeEventListener("scroll", handleScroll);
}
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
};
}, [loadMore, hasMore, loadingMore]);
@ -656,7 +669,7 @@ export function ManageIdeasTechPage() {
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
<CardContent className="p-0">
<div className="relative">
<Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(100vh-200px)]">
<Table containerRef={scrollContainerRef} containerClassName="overflow-auto custom-scrollbar max-h-[calc(100vh-200px)]">
<TableHeader className="sticky top-0 z-50 bg-muted">
<TableRow className="bg-muted">
{columns.map((column) => (

44
app/components/dashboard/project-management/project-management-page.tsx
View File

@ -167,6 +167,8 @@ export function ProjectManagementPage() {
});
const observerRef = useRef<HTMLDivElement>(null);
const fetchingRef = useRef(false);
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null);
const fetchProjects = async (reset = false) => {
// Prevent concurrent API calls
@ -264,10 +266,10 @@ export function ProjectManagementPage() {
};
const loadMore = useCallback(() => {
if (hasMore && !loading) {
if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
setCurrentPage((prev) => prev + 1);
}
}, [hasMore, loading]);
}, [hasMore, loading, loadingMore]);
useEffect(() => {
fetchProjects(true);
@ -280,29 +282,43 @@ export function ProjectManagementPage() {
}
}, [currentPage]);
// Infinite scroll observer
// Infinite scroll observer with debouncing
useEffect(() => {
const scrollContainer = document.querySelector(".overflow-auto");
const handleScroll = () => {
if (!scrollContainer || !hasMore) return;
const scrollContainer = scrollContainerRef.current;
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
// Trigger load more when scrolled to 90% of the container
if (scrollPercentage == 1 || scrollPercentage == .9) {
loadMore();
const handleScroll = () => {
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) return;
// Clear previous timeout
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
// Debounce scroll events
scrollTimeoutRef.current = setTimeout(() => {
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
// Trigger load more when scrolled to 95% of the container
if (scrollPercentage >= 0.95) {
loadMore();
}
}, 150);
};
if (scrollContainer) {
scrollContainer.addEventListener("scroll", handleScroll);
scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
}
return () => {
if (scrollContainer) {
scrollContainer.removeEventListener("scroll", handleScroll);
}
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
};
}, [loadMore, hasMore]);
}, [loadMore, hasMore, loadingMore]);
const handleSort = (field: string) => {
fetchingRef.current = false; // Reset fetching state on sort
@ -754,7 +770,7 @@ export function ProjectManagementPage() {
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
<CardContent className="p-0">
<div className="relative">
<div className="relative overflow-auto custom-scrollbar max-h-[calc(100vh-120px)]">
<div ref={scrollContainerRef} className="relative overflow-auto custom-scrollbar max-h-[calc(100vh-120px)]">
<Table className="table-fixed">
<TableHeader className="sticky top-0 z-50 bg-[#3F415A]">
<TableRow className="bg-[#3F415A]">

6
app/components/ui/progress.tsx
View File

@ -16,13 +16,11 @@ const Progress = React.forwardRef<
{...props}
>
<span className="left-0 text-sm absolute z-10 px-2 text-[#5F6284]">۰%</span>
<span className="w-full text-sm absolute z-10 px-2 text-[#5F6284]"
style={{ transform: `translateX(-${10 - (value || 0)}%)` }}
<span className="w-full right-0 text-sm absolute z-10 px-2 text-[#5F6284]"
>{formatNumber(Math.ceil(value || 0 * 10) / 10)}%</span>
<span className="right-0 text-sm absolute z-10 px-2 text-[#5F6284]">{formatNumber(.2)}%</span>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${20 - (value || 0)}%)` }}
style={{ transform: `translateX(-${15 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>
))

5
app/components/ui/table.tsx
View File

@ -4,11 +4,12 @@ import { cn } from "~/lib/utils"
interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
containerClassName?: string
containerRef?: React.RefObject<HTMLDivElement>
}
const Table = React.forwardRef<HTMLTableElement, TableProps>(
({ className, containerClassName, ...props }, ref) => (
<div className={cn("relative w-full", containerClassName)}>
({ className, containerClassName, containerRef, ...props }, ref) => (
<div ref={containerRef} className={cn("relative w-full", containerClassName)}>
<table
ref={ref}
className={cn("w-full caption-bottom text-sm h-full", className)}