We are using useInView to detect if a row should be rendered or not. # Behavior issue When browsing an Index page (let's say People), then navigating to another one (Company), then back to People, the rows were not displayed anymore. For some reason the inView value was set to false in this case # Fix - I have updated the useInView (react-intersection-observer) package but it did not fix it - useInView provides a ref. However, I believe this was conflicting with the draggableRef; cecause we are in a <table> we cannot add additional containers and are forced to apply both refs to the <tr> (draggableRef + inViewRef). I believe this was causing the issue. I have added the inView ref to an empty <td> within the row which is achieving the same goal without forcing to combine refs
19 lines
467 B
TypeScript
19 lines
467 B
TypeScript
import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev';
|
|
import { useEffect } from 'react';
|
|
import { useRecoilValue } from 'recoil';
|
|
|
|
import { isDebugModeState } from '@/client-config/states/isDebugModeState';
|
|
|
|
export const ApolloDevLogEffect = () => {
|
|
const isDebugMode = useRecoilValue(isDebugModeState);
|
|
|
|
useEffect(() => {
|
|
if (isDebugMode) {
|
|
loadDevMessages();
|
|
loadErrorMessages();
|
|
}
|
|
}, [isDebugMode]);
|
|
|
|
return null;
|
|
};
|