src/components/Facility/PatientNotesList.tsx (1)

Line range hint 1-105: Consider implementing a more robust infinite scroll solution

The current implementation might benefit from using established infinite scroll libraries or implementing virtual scrolling to handle large datasets more efficiently.

Consider these architectural improvements:

1. Use a virtual scroll library like react-window or react-virtualized to efficiently render large lists
2. Implement scroll position restoration using ScrollRestoration from react-router-dom
3. Add loading states for individual batches to show progress without full-screen loading
4. Consider implementing a cursor-based pagination instead of offset-based to prevent issues with concurrent updates

Example implementation structure:

import { FixedSizeList } from 'react-window';

interface NotesListProps {
  // ... existing props
  windowHeight: number;
}

const NotesListRow = ({ index, style, data }) => {
  const note = data.notes[index];
  return (
    <div style={style}>
      <DoctorNote note={note} />
    </div>
  );
};

const PatientNotesList = (props: NotesListProps) => {
  const [scrollOffset, setScrollOffset] = useState(0);
  
  // ... existing state and effects

  return (
    <FixedSizeList
      height={props.windowHeight}
      itemCount={state.notes.length}
      itemSize={120}
      onScroll={({ scrollOffset }) => {
        setScrollOffset(scrollOffset);
        // Trigger load more when near bottom
      }}
    >
      {NotesListRow}
    </FixedSizeList>
  );
};

src/components/Facility/PatientConsultationNotesList.tsx (1)

Line range hint 41-77: Enhance infinite scroll implementation to prevent unexpected reloads

The current implementation might be causing the reported issues with unexpected reloads and lost scroll position. Several improvements are recommended:

1. The scroll position issue mentioned in Enhance Discussion Notes Chat History with Infinite Scrolling or Better Navigation Solution #9188 likely occurs because state updates trigger re-renders without preserving scroll position.
2. Multiple rapid scroll events could trigger unnecessary fetches.
3. The loading state might cause layout shifts during updates.

Consider these improvements:

1. Implement scroll position preservation:

const scrollRef = useRef<HTMLDivElement>(null);
const scrollPosition = useRef(0);

const saveScrollPosition = () => {
  if (scrollRef.current) {
    scrollPosition.current = scrollRef.current.scrollTop;
  }
};

const restoreScrollPosition = () => {
  if (scrollRef.current) {
    scrollRef.current.scrollTop = scrollPosition.current;
  }
};

// Save position before fetch
saveScrollPosition();
fetchNotes().then(() => {
  setIsLoading(false);
  setReload?.(false);
  // Restore position after state update
  requestAnimationFrame(restoreScrollPosition);
});

2. Add debouncing to prevent rapid fetches:

const debouncedHandleNext = useMemo(
  () => debounce(() => {
    if (state.cPage < state.totalPages) {
      setState((prevState) => ({
        ...prevState,
        cPage: prevState.cPage + 1,
      }));
      setReload?.(true);
    }
  }, 250),
  [state.cPage, state.totalPages]
);

3. Consider using a virtual scroll library like react-window for better performance with large lists.

Configuration used: CodeRabbit UI
Review profile: CHILL

  useEffect(() => {
+   const currentScrollPosition = window.scrollY;
    setIsLoading(true);
-   setReload(true);
+   // Debounce reload to prevent rapid re-fetches
+   const timeoutId = setTimeout(() => {
+     setReload(true);
+   }, 100);
+   // Restore scroll position after state updates
+   requestAnimationFrame(() => {
+     window.scrollTo(0, currentScrollPosition);
+   });
+   return () => clearTimeout(timeoutId);
  }, [thread]);