I want to build a getInitialProps-based fetching mechanism in Next.js. Every time we change the filter of the calendar we call loadCalendar with updated query-params and setLoading(true). On router.push getInitialProps gets called and fetches data based on updated query. Because we return loading in getInitialProps the useEffect should trigger and update loading-state. But for some reason this does not happen because useEffect does not trigger.
Any Idea why this happens? Is there a better approach to handle the loading-state?

function Calendar(props) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(false);
  }, [props.loading]);


  function loadCalendar(query) {
    setLoading(true);
    router.push({ query });
  }

  ...
}

Calendar.getInitialProps = ({ store, query }) => {
  await store.dispatch(fetchCalendar(query));

  const loading = new Date().getTime();
  return { loading };
}