Privacy mode: no layout shift when switching mode

actualbudget · Sep 16, 2024 · 1a774d4 · 1a774d4
1 parent d9209d5
commit 1a774d4
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 40 deletions.
diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx
@@ -7,6 +7,8 @@ import React, {
   type ReactNode,
 } from 'react';
 
+import { css } from 'glamor';
+
 import { usePrivacyMode } from '../hooks/usePrivacyMode';
 import { useResponsive } from '../ResponsiveProvider';
 
@@ -44,11 +46,9 @@ export function ConditionalPrivacyFilter({
 
 type PrivacyFilterProps = ComponentPropsWithRef<typeof View> & {
   activationFilters?: (boolean | (() => boolean))[];
-  lineHeight?: number;
 };
 export function PrivacyFilter({
   activationFilters,
-  lineHeight,
   children,
   ...props
 }: PrivacyFilterProps) {
@@ -63,43 +63,58 @@ export function PrivacyFilter({
         typeof value === 'boolean' ? value : value(),
       ));
 
-  const privacyLineHeight = lineHeight != null ? lineHeight : 'inherit';
-
   return !activate ? (
     <>{Children.toArray(children)}</>
   ) : (
-    <PrivacyOverlay lineHeight={privacyLineHeight} {...props}>
-      {children}
-    </PrivacyOverlay>
+    <PrivacyOverlay {...props}>{children}</PrivacyOverlay>
   );
 }
 
-function PrivacyOverlay({ lineHeight, children, ...props }) {
+function PrivacyOverlay({ children, ...props }) {
   const [hovered, setHovered] = useState(false);
   const onHover = useCallback(() => setHovered(true), [setHovered]);
   const onHoverEnd = useCallback(() => setHovered(false), [setHovered]);
 
-  const privacyStyle = {
-    ...(!hovered && {
-      fontFamily: 'Redacted Script',
-      lineHeight,
-    }),
-  };
-
   const { style, ...restProps } = props;
 
   return (
     <View
-      style={{
-        display: style?.display ? style.display : 'inline-flex',
-        ...privacyStyle,
-        ...style,
-      }}
+      className={`${css(
+        [
+          {
+            display: 'inline-flex',
+            position: 'relative',
+            ' > div:first-child': {
+              opacity: hovered ? 1 : 0,
+            },
+            ' > div:nth-child(2)': {
+              display: hovered ? 'none' : 'block',
+            },
+          },
+        ],
+        style,
+      )}`}
       onPointerEnter={onHover}
       onPointerLeave={onHoverEnd}
       {...restProps}
     >
-      {children}
+      <div>
+        <View>{children}</View>
+      </div>
+
+      <div
+        aria-hidden="true"
+        className={`${css({
+          fontFamily: 'Redacted Script',
+          height: '100%',
+          inset: 0,
+          pointerEvents: 'none',
+          position: 'absolute',
+          width: '100%',
+        })}`}
+      >
+        <View>{children}</View>
+      </div>
     </View>
   );
 }

diff --git a/packages/desktop-client/src/components/accounts/Balance.jsx b/packages/desktop-client/src/components/accounts/Balance.jsx
@@ -184,9 +184,7 @@ export function Balances({
                   ? theme.noticeTextLight
                   : theme.pageTextSubdued,
           })}
-          privacyFilter={{
-            lineHeight: 1.22,
-          }}
+          privacyFilter
         />
 
         <SvgArrowButtonRight1

diff --git a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
@@ -175,6 +175,7 @@ export const GroupMonth = memo(function GroupMonth({
           valueProps={{
             binding: reportBudget.groupBalance(id),
             type: 'financial',
+            // TODO: may no longer be unnecessary
             privacyFilter: {
               style: {
                 paddingRight: styles.monthRightPadding,

diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
@@ -165,11 +165,6 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
         valueProps={{
           binding: rolloverBudget.groupBalance(id),
           type: 'financial',
-          privacyFilter: {
-            style: {
-              paddingRight: styles.monthRightPadding,
-            },
-          },
         }}
       />
     </View>
@@ -422,11 +417,6 @@ export function IncomeGroupMonth({ month }: IncomeGroupMonthProps) {
         valueProps={{
           binding: rolloverBudget.groupIncomeReceived,
           type: 'financial',
-          privacyFilter: {
-            style: {
-              paddingRight: styles.monthRightPadding,
-            },
-          },
         }}
       />
     </View>

diff --git a/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx
@@ -64,7 +64,11 @@ export function ToBudgetAmount({
           offset={3}
           triggerProps={{ isDisabled: isTotalsListTooltipDisabled }}
         >
-          <PrivacyFilter lineHeight={1.2}>
+          <PrivacyFilter
+            style={{
+              textAlign: 'center',
+            }}
+          >
             <Block
               onClick={onClick}
               data-cellname={sheetName}

diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
@@ -197,11 +197,6 @@ export function Cell({
         privacyFilter={mergeConditionalPrivacyFilterProps(
           {
             activationFilters: [!focused, !exposed],
-            style: {
-              position: 'absolute',
-              width: '100%',
-              height: '100%',
-            },
           },
           privacyFilter,
         )}