export default const useDelayDialogChildrenRender = ({
  children: childrenFromProps,
  open,
}: DelayRenderDialogProps) => {
  const children = open ? childrenFromProps : <MyLoadingGif />;

  const closedChildrenRef = useRef<Optional<React.ReactNode>>();
  const openedChildrenRef = useRef<Optional<React.ReactNode>>();
  const prevOpenRef = useRef<Optional<boolean>>();

  const { current: closedChildren } = closedChildrenRef;
  const { current: openedChildren } = openedChildrenRef;
  const { current: prevOpen } = prevOpenRef;

  // your dialog will need hooks into when the dialog is entered/exited like eg the material-ui dialog
  // we don't strictly need modalState here but it may be useful for the component using this hook
  const [modalState, setModalState] = useState<'Exited' | 'Entered'>('Exited');

  const onEntered = useCallback(() => {
    setModalState('Entered');
  }, [onEnteredFromProps]);

  const onExited = useCallback(() => {
    setModalState('Exited');
  }, [onExitedFromProps]);

  // use layout effect here so we guarantee we capture these ref
  // updates synchronously before on entered/exited fire and that we
  // don't update ref multiple times in case of a double render
  useLayoutEffect(() => {
    prevOpenRef.current = open;

    if (open) {
      openedChildrenRef.current = children;
    } else {
      closedChildrenRef.current = children;
    }
  }, [open, prevOpen, children]);

  const childrenToRender =
    open && !prevOpen
      ? closedChildren || children
      : !open && prevOpen
      ? openedChildren || children
      : children;

  return {childrenToRender, onEntered, onExited, modalState};
};