From 04c0b6b719309c987f0155ed3715eb2f6fd28fe7 Mon Sep 17 00:00:00 2001
From: mjac0bs <mjacobs@akamai.com>
Date: Tue, 10 Sep 2024 13:45:49 -0700
Subject: [PATCH] Improve fading behavior

---
 .../src/components/AccessPanel/UserSSHKeyPanel.tsx |  2 +-
 .../manager/src/components/GravatarByEmail.tsx     | 14 ++++++++++++++
 .../manager/src/components/GravatarByUsername.tsx  | 13 +++++++++++++
 .../manager/src/features/Events/EventRow.styles.ts |  2 +-
 .../NotificationCenter.styles.ts                   |  2 +-
 .../Profile/DisplaySettings/DisplaySettings.tsx    |  2 +-
 .../src/features/TopMenu/UserMenu/UserMenu.tsx     |  2 +-
 packages/manager/src/features/Users/UserRow.tsx    |  2 +-
 8 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index 8051823b640..906097b0fcc 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '30%',
   },
   gravatar: {
-    animation: `${fadeIn} .2s ease-out forwards`,
+    animation: `${fadeIn} .2s ease-in-out forwards`,
     borderRadius: '50%',
     height: 24,
     marginRight: theme.spacing(1),
diff --git a/packages/manager/src/components/GravatarByEmail.tsx b/packages/manager/src/components/GravatarByEmail.tsx
index 4ff64876d93..95e4bdc183d 100644
--- a/packages/manager/src/components/GravatarByEmail.tsx
+++ b/packages/manager/src/components/GravatarByEmail.tsx
@@ -4,6 +4,8 @@ import * as React from 'react';
 import UserIcon from 'src/assets/icons/account.svg';
 import { getGravatarUrl } from 'src/utilities/gravatar';
 
+import { Box } from './Box';
+
 export const DEFAULT_AVATAR_SIZE = 28;
 
 export interface GravatarByEmailProps {
@@ -23,6 +25,18 @@ export const GravatarByEmail = (props: GravatarByEmailProps) => {
 
   const url = getGravatarUrl(email);
 
+  // Render placeholder instead of flashing default user icon briefly
+  if (!url) {
+    return (
+      <Box
+        sx={{
+          height,
+          width,
+        }}
+      />
+    );
+  }
+
   return (
     <Avatar
       alt={`Avatar for user ${email}`}
diff --git a/packages/manager/src/components/GravatarByUsername.tsx b/packages/manager/src/components/GravatarByUsername.tsx
index 9f3cf39c029..810caebf7c7 100644
--- a/packages/manager/src/components/GravatarByUsername.tsx
+++ b/packages/manager/src/components/GravatarByUsername.tsx
@@ -5,6 +5,7 @@ import UserIcon from 'src/assets/icons/account.svg';
 import { useAccountUser } from 'src/queries/account/users';
 import { getGravatarUrl } from 'src/utilities/gravatar';
 
+import { Box } from './Box';
 import { DEFAULT_AVATAR_SIZE } from './GravatarByEmail';
 
 export interface GravatarByUsernameProps {
@@ -17,6 +18,18 @@ export const GravatarByUsername = (props: GravatarByUsernameProps) => {
   const { data: user } = useAccountUser(username ?? '');
   const url = user?.email ? getGravatarUrl(user.email) : undefined;
 
+  // Render placeholder instead of flashing default user icon briefly
+  if (!url) {
+    return (
+      <Box
+        sx={{
+          height: DEFAULT_AVATAR_SIZE,
+          width: DEFAULT_AVATAR_SIZE,
+        }}
+      />
+    );
+  }
+
   return (
     <Avatar
       alt={`Avatar for user ${username}`}
diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
index 968b58bd1c9..d290c6469c9 100644
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ b/packages/manager/src/features/Events/EventRow.styles.ts
@@ -8,7 +8,7 @@ import { GravatarByUsername } from '../../components/GravatarByUsername';
 export const StyledGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatar',
 })(({ theme }) => ({
-  animation: `${fadeIn} 1.75s ease-out forwards`,
+  animation: `${fadeIn} 0.2s ease-in-out forwards`,
   height: theme.spacing(3),
   width: theme.spacing(3),
 }));
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index a59176a1344..620151a4769 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -123,7 +123,7 @@ export const NotificationEventStyledBox = styled(Box, {
 export const NotificationEventGravatar = styled(GravatarByUsername, {
   label: 'StyledGravatarByUsername',
 })(() => ({
-  animation: `${fadeIn} 1s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
   height: 32,
   marginTop: 2,
   minWidth: 32,
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 821da8d8cfd..ce64dae9ead 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -228,5 +228,5 @@ const StyledTooltipIcon = styled(TooltipIcon, {
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .3s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
 }));
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index f1d8fef35e8..2712c26514a 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -355,5 +355,5 @@ const Heading = styled(Typography)(({ theme }) => ({
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .2s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
 }));
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index 9c62b8efbf8..3d33812f341 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -120,5 +120,5 @@ const LastLogin = (props: Pick<User, 'last_login'>) => {
 const StyledGravatar = styled(GravatarByEmail, {
   label: 'StyledGravatarByEmail',
 })(() => ({
-  animation: `${fadeIn} .3s ease-out forwards`,
+  animation: `${fadeIn} .2s ease-in-out forwards`,
 }));