Shows header before data is fetched

web/src/features/panels/Zone/ZoneDetails.tsx

@@ -1,5 +1,4 @@
 import useGetZone from 'api/getZone';
-import LoadingOrError from 'components/LoadingOrError';
 import { useAtom } from 'jotai';
 import { Navigate, useParams } from 'react-router-dom';
 import { timeAverageAtom } from 'utils/state';
@@ -8,23 +7,23 @@ import { ZoneHeader } from './ZoneHeader';
 export default function ZoneDetails(): JSX.Element {
  const { zoneId } = useParams();
  const [timeAverage] = useAtom(timeAverageAtom);
- const { isLoading, isError, error, data } = useGetZone(timeAverage, zoneId, {
+ const { error, data, status } = useGetZone(timeAverage, zoneId, {
  enabled: Boolean(zoneId),
  });
 
  if (!zoneId) {
  return <Navigate to="/" replace />;
  }
 
- if (isLoading || isError) {
- return <LoadingOrError error={error as Error} />;
- }
-
+ // TODO: Handle error state
+ // TODO: Handle loading state nicely (let's keep country name in the header)
+ console.error(error);
  console.log('I should do something with all this data', data);
 
  return (
  <div>
- <ZoneHeader zoneId={zoneId} />
+ <ZoneHeader zoneId={zoneId} date="" isEstimated isAggregated />
+ {status === 'loading' && 'Loading...'}
  </div>
  );
 }