stop font size fluctuations showing in summary cards (#7092)

* stop summary cards from showing until font size settled

* note

packages/desktop-client/src/components/reports/FormulaResult.tsx

@@ -49,6 +49,7 @@ export function FormulaResult({
   containerRef,
 }: FormulaResultProps) {
   const [fontSize, setFontSize] = useState<number>(initialFontSize);
+  const [hasSized, setHasSized] = useState(false);
   const refDiv = useRef<HTMLDivElement>(null);
   const previousFontSizeRef = useRef<number>(initialFontSize);
   const format = useFormat();
@@ -89,7 +90,10 @@ export function FormulaResult({
       height, // Ensure the text fits vertically by using the height as the limiting factor
     );
 
-    setFontSize(calculatedFontSize);
+    if (calculatedFontSize > 0) {
+      setFontSize(calculatedFontSize);
+      setHasSized(true);
+    }
 
     // Only call fontSizeChanged if the font size actually changed
     if (
@@ -143,6 +147,7 @@ export function FormulaResult({
   useEffect(() => {
     if (fontSizeMode === 'static') {
       setFontSize(staticFontSize);
+      setHasSized(true);
     }
   }, [fontSizeMode, staticFontSize]);
 
@@ -153,6 +158,8 @@ export function FormulaResult({
       ? theme.errorText
       : theme.pageText;
 
+  const showContent = hasSized || fontSizeMode === 'static';
+
   return (
     <View style={{ flex: 1 }}>
       {loading && <LoadingIndicator />}
@@ -175,9 +182,13 @@ export function FormulaResult({
             color,
           }}
         >
-          <span aria-hidden="true">
-            <PrivacyFilter>{displayValue}</PrivacyFilter>
-          </span>
+          {!showContent ? (
+            <LoadingIndicator />
+          ) : (
+            <span aria-hidden="true">
+              <PrivacyFilter>{displayValue}</PrivacyFilter>
+            </span>
+          )}
         </View>
       )}
     </View>

packages/desktop-client/src/components/reports/SummaryNumber.tsx

@@ -38,6 +38,7 @@ export function SummaryNumber({
 }: SummaryNumberProps) {
   const { t } = useTranslation();
   const [fontSize, setFontSize] = useState<number>(initialFontSize);
+  const [hasSized, setHasSized] = useState(false);
   const refDiv = useRef<HTMLDivElement>(null);
   const format = useFormat();
   const isNumericValue = Number.isFinite(value);
@@ -61,7 +62,10 @@ export function SummaryNumber({
       height, // Ensure the text fits vertically by using the height as the limiting factor
     );
 
-    setFontSize(calculatedFontSize);
+    if (calculatedFontSize > 0) {
+      setFontSize(calculatedFontSize);
+      setHasSized(true);
+    }
 
     if (calculatedFontSize !== initialFontSize && fontSizeChanged) {
       fontSizeChanged(calculatedFontSize);
@@ -107,9 +111,13 @@ export function SummaryNumber({
                   : theme.reportsNumberPositive,
           }}
         >
-          <FinancialText aria-hidden="true">
-            <PrivacyFilter>{displayAmount}</PrivacyFilter>
-          </FinancialText>
+          {!hasSized ? (
+            <LoadingIndicator />
+          ) : (
+            <FinancialText aria-hidden="true">
+              <PrivacyFilter>{displayAmount}</PrivacyFilter>
+            </FinancialText>
+          )}
         </View>
       )}
     </>

upcoming-release-notes/7092.md

@@ -0,0 +1,6 @@
+---
+category: Bugfixes
+authors: [matt-fidd]
+---
+
+Stop font size fluctuations showing in summary cards