#atom
#problem/solved
Total, el problema de hoy es como hacer que al refrescar el contenido de la tabla el scroll no se reinicie.
El problema obviamente es que no quiero directamente controlar el scroll en el estado. Que entiéndeme, se podría incluso hacer bien con Throtling o Debounce

useQuery & useEffect in tandem, store scroll position (did not work)

El tema tambien viene de que estamos usando React Query, concretamente useQuery y el refetch ocurre automaticamente, virtualmente podemos sobrescribir la función de refetch, pero lo que vamos a hacer es usar un useEffect escuchando a los datos, la solución se va a quedar tal que:

function MyAgGridComponent() {
  const gridRef = useRef();
  const [scrollPosition, setScrollPosition] = useState(null);
  const prevDataRef = useRef(null);
  
  // Your custom hook that internally uses useQuery
  const { data, isLoading } = useResultById(someId);
  
  // Detect when data is changing and capture scroll position
  useEffect(function captureScrollPositionOnDataChange() {
    // If we have current data and previous data exists (not first render)
    if (data && prevDataRef.current && data !== prevDataRef.current) {
      // Data is changing, capture scroll position
      if (gridRef.current?.api) {
        const position = gridRef.current.api.getVerticalPixelRange()?.top;
        if (position !== undefined) {
          setScrollPosition(position);
        }
      }
    }
    
    // Update previous data reference
    prevDataRef.current = data;
  }, [data]);
  
  // Restore scroll position after data has changed
  useEffect(function restoreScrollPositionAfterDataLoad() {
    if (scrollPosition !== null && !isLoading && gridRef.current?.api) {
      // Use requestAnimationFrame to ensure we apply after render
      requestAnimationFrame(() => {
        gridRef.current.api.scrollVertically(scrollPosition);
        // Reset to avoid unnecessary scrolling
        setScrollPosition(null);
      });
    }
  }, [scrollPosition, isLoading]);
  
  return (
    <AgGridReact
      ref={gridRef}
      rowData={data}
      columnDefs={columnDefs}
      // other props
    />
  );
}

suppressScrollOnNewData (did not work)

I shit you not, this didn't work, however AG Grid has a suppressScrollOnNewData property, in the scroll property in the grid options

Changing how the loading state works (did not work)

I shit you not, netiher of these worked, because scrollVertically doesn't exist, and the suppressScrollOnNewData property is not working either.
So I figured, what if the loading state is killing the table and recreating it, so got rid of the loading state but that didn't work either.

So the next step was using getFirstDisplayedRowIndex, but this does show up any items on the buffer, so it wasn't actually returning the one we want.

Comparison id is already in the state, so use ensureIndexVisible (worked half-way)

The next approach is to simple have a wrapper of the change, when the call is done in the change (in this case, modal closing), store the modified item, then try to make it show up via
ensureIndexVisible, and that didn't fully work, it works on local though, so the next step is to add a listener to onRowDataUpdated, calling this same behaviour

Revisiting this on 2025-03-18 because the last fix (ensureIndexVisible) did work, but it's jumpy, which means, it does show the row, but it does whatever scroll position does it want, but the row does show up.

First off, I'm going to try to figure out why suppressScollOnNewData is not working, and to do that we're going to clone the repo, which is huge
In the meanwhile I made sure the suppressScrollOnNewData is set to true
I've added the debug flag, see if we can get some information, and I've moved the sorting of the data from the render function to the service (api call, getting tokens and what not) function.

What actually worked, moving the sort around

So the sort was on the render function, and I moved to behind the useQuery, and I figure React query is keeping it memoized and not triggereing more render than necessary.

Connections:

Sources: