Consistency improvements for <AnimatedLoading> (#1390)

packages/desktop-client/src/components/Notifications.tsx

@@ -11,7 +11,7 @@ import { type CSSProperties } from 'glamor';
 import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
 
 import { useActions } from '../hooks/useActions';
-import Loading from '../icons/AnimatedLoading';
+import AnimatedLoading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
 import { styles, colors } from '../style';
 
@@ -210,8 +210,7 @@ function Notification({
             justifyContent: 'center',
           }}
         >
-          <Loading
-            color="currentColor"
+          <AnimatedLoading
             style={{ width: 20, height: 20, color: 'currentColor' }}
           />
         </View>

packages/desktop-client/src/components/accounts/Header.js

 import React, { useState, useRef } from 'react';
 
 import useSyncServerStatus from '../../hooks/useSyncServerStatus';
-import Loading from '../../icons/AnimatedLoading';
+import AnimatedLoading from '../../icons/AnimatedLoading';
 import Add from '../../icons/v1/Add';
 import ArrowsExpand3 from '../../icons/v2/ArrowsExpand3';
 import ArrowsShrink3 from '../../icons/v2/ArrowsShrink3';
@@ -288,7 +288,10 @@ export function AccountHeader({
           />
           {workingHard ? (
             <View>
-              <Loading color={colors.n1} style={{ width: 16, height: 16 }} />
+              <AnimatedLoading
+                color={colors.n1}
+                style={{ width: 16, height: 16 }}
+              />
             </View>
           ) : (
             <SelectedTransactionsButton

packages/desktop-client/src/components/common/Button.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { css, type CSSProperties } from 'glamor';
 
-import Loading from '../../icons/AnimatedLoading';
+import AnimatedLoading from '../../icons/AnimatedLoading';
 import { styles, colors } from '../../style';
 import { type HTMLPropsWithStyle } from '../../types/utils';
 
@@ -137,7 +137,7 @@ export const ButtonWithLoading = forwardRef<
             justifyContent: 'center',
           }}
         >
-          <Loading color="inherit" style={{ width: 20, height: 20 }} />
+          <AnimatedLoading style={{ width: 20, height: 20 }} />
         </View>
       )}
       <View

packages/desktop-client/src/components/common/Modal.tsx

@@ -9,7 +9,7 @@ import ReactModal from 'react-modal';
 import type { CSSProperties } from 'glamor';
 import hotkeys from 'hotkeys-js';
 
-import Loading from '../../icons/AnimatedLoading';
+import AnimatedLoading from '../../icons/AnimatedLoading';
 import Delete from '../../icons/v0/Delete';
 import { styles, colors } from '../../style';
 import tokens from '../../tokens';
@@ -217,7 +217,10 @@ const Modal = ({
               zIndex: 1000,
             }}
           >
-            <Loading style={{ width: 20, height: 20 }} color={colors.n1} />
+            <AnimatedLoading
+              style={{ width: 20, height: 20 }}
+              color={colors.n1}
+            />
           </View>
         )}
       </ModalContent>

packages/desktop-client/src/icons/Loading.js

 import React, { useState } from 'react';
 
 const SvgLoading = props => {
-  let { color = '#fff' } = props;
+  let { color = 'currentColor' } = props;
   let [gradientId] = useState('gradient-' + Math.random());
 
   return (

upcoming-release-notes/1390.md

+---
+category: Maintenance
+authors: [j-f1]
+---
+
+Consistency improvements for `<AnimatedLoading>`