Improve fading behavior

mjac0bs · Sep 10, 2024 · 04c0b6b · 04c0b6b
1 parent b9d597b
commit 04c0b6b
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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`,
 }));