fix: prevent UI overlaps in header

happened on initial load and when scrolling

src/views/Month/Month.module.scss

@@ -34,6 +34,7 @@
   transition: height 200ms ease-out;
   background: var(--background-color);
 }
+
 .headerBorder {
   display: block;
   position: absolute;
@@ -48,6 +49,8 @@
   list-style: none;
   margin: 0;
   padding: 0 0 3.3rem;
+  opacity: 0;
+  transition: opacity 200ms ease-in-out 200ms;
   li {
     span {
       display: inline-block;
@@ -73,7 +76,9 @@
     line-height: 1.1em;
   }
 }
-
+.headTableVisible {
+  opacity: 1;
+}
 .bigBudget {
   font-size: 1.5em;
 }

src/views/Month/Overview.tsx

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useState } from 'react';
+import cx from 'classnames';
 import classNames from 'classnames';
 import format from 'date-fns/format';
 import subMonths from 'date-fns/subMonths';
@@ -32,20 +33,26 @@ export default function Overview({
   data,
   numberFormatter,
 }: Props) {
-  const ref = useRef<HTMLDivElement | null>(null);
   const budgetClasses = data
     ? classNames(
         data.toBudget !== 0 && styles.bigBudget,
         data.toBudget < 0 && styles.negative,
       )
     : '';
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const i = setTimeout(() => setVisible(Boolean(data)), 50);
+    return () => clearTimeout(i);
+  }, [data]);
 
   return (
-    <div ref={ref}>
+    <div>
       <h3 className={styles.title}>{name}</h3>
       {data && (
         <>
-          <ul className={styles.headTable}>
+          <ul
+            className={cx(styles.headTable, visible && styles.headTableVisible)}
+          >
             <ListItem
               amount={numberFormatter.format(data.availableThisMonth.amount)}
               title="Available Funds"