perf: reduce layout shift

(mainly to fix tests)
Xiphe · Feb 7, 2021 · 5239ad3 · 5239ad3
1 parent 0219706
commit 5239ad3
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 18 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,11 @@ import {
   useBudgetReducer,
   initialInitDataRes,
 } from './budget';
-import { ErrorBoundary, Startup } from './components';
+import {
+  ErrorBoundary,
+  Startup,
+  ScrollBarDimensionProvider,
+} from './components';
 import styles from './App.module.scss';
 import { useNumberFormatter, useRetryResource } from './lib';
 import { useMoneyMoney } from './moneymoney';
@@ -71,7 +75,7 @@ export default function AppWrapper() {
   );
 
   return (
-    <div
+    <ScrollBarDimensionProvider
       className={classNames(
         styles.app,
         process.env.REACT_APP_ENV === 'test' && styles.appTest,
@@ -82,6 +86,6 @@ export default function AppWrapper() {
           <App readInitialView={retryReadInit} />
         </ErrorBoundary>
       </Suspense>
-    </div>
+    </ScrollBarDimensionProvider>
   );
 }
diff --git a/src/components/Content/Content.module.scss b/src/components/Content/Content.module.scss
@@ -1,6 +1,7 @@
 .content {
   margin-top: var(--header-height);
   height: calc(100vh - var(--header-height));
+  overflow: hidden;
 }
 .padding {
   padding: 0 2rem;

diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import styles from './Content.module.scss';
-import ScrollbarDimensionProvider from '../ScrollBarDimensionProvider';
 
 type Props = {
   className?: string;
@@ -22,7 +21,7 @@ export default function Content({
   return (
     <>
       {header}
-      <ScrollbarDimensionProvider
+      <div
         className={classNames(
           className,
           styles.content,
@@ -32,7 +31,7 @@ export default function Content({
         )}
       >
         {children}
-      </ScrollbarDimensionProvider>
+      </div>
     </>
   );
 }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -10,5 +10,6 @@ export { default as Select } from './Select';
 export { default as Row } from './Row';
 export { default as Button } from './Button';
 export { default as InfiniteSlider } from './InfiniteSlider';
+export { default as ScrollBarDimensionProvider } from './ScrollBarDimensionProvider';
 export * from './TabBar';
 export type ScrollTo = ScrollToT;
diff --git a/src/views/Month/Month.module.scss b/src/views/Month/Month.module.scss
@@ -6,20 +6,12 @@
   max-width: calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0));
   height: var(--sidebar-height, 'auto');
   @media (min-width: 800px) {
-    min-width: calc(
-      calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 2
-    );
-    max-width: calc(
-      calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 2
-    );
+    min-width: calc((100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 2);
+    max-width: calc((100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 2);
   }
   @media (min-width: 1100px) {
-    min-width: calc(
-      calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 3
-    );
-    max-width: calc(
-      calc(100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 3
-    );
+    min-width: calc((100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 3);
+    max-width: calc((100vw - var(--sidebar-width) - var(--scrollbar-x, 0)) / 3);
   }
 }