fix avatar transitions (#1264)

src/components/ChannelWithVideos/ChannelWithVideos.tsx

@@ -32,7 +32,7 @@ export const ChannelWithVideos: FC<ChannelWithVideosProps> = ({ channelId }) =>
   const [videosPerRow, setVideosPerRow] = useState(INITIAL_VIDEOS_PER_ROW)
   const { channel, loading } = useChannel(channelId || '')
 
-  const { url: avatarUrl } = useAsset({ entity: channel, assetType: AssetType.AVATAR })
+  const { url: avatarUrl, isLoadingAsset: isLoadingAvatar } = useAsset({ entity: channel, assetType: AssetType.AVATAR })
   const { toggleFollowing, isFollowing } = useHandleFollowChannel(channelId)
   const { displayedItems, placeholdersCount, error } = useInfiniteGrid<
     GetVideosConnectionQuery,
@@ -73,7 +73,7 @@ export const ChannelWithVideos: FC<ChannelWithVideosProps> = ({ channelId }) =>
   return (
     <>
       <ChannelCardAnchor to={absoluteRoutes.viewer.channel(channelId)}>
-        <StyledAvatar size="channel" loading={isLoading} assetUrl={avatarUrl} />
+        <StyledAvatar size="channel" loading={isLoading || isLoadingAvatar} assetUrl={avatarUrl} />
         <InfoWrapper>
           {isLoading ? (
             <SkeletonLoader width="120px" height="20px" bottomSpace="4px" />

src/providers/assets/useAsset.tsx

@@ -17,7 +17,7 @@ export const useAsset = ({ entity, assetType }: UseAssetDataArgs) => {
     addPendingAsset(contentId, assetData)
   }, [addPendingAsset, asset, assetData, contentId, pendingAsset])
 
-  return { url: asset?.url, isLoadingAsset: !asset }
+  return { url: asset?.url, isLoadingAsset: !assetData || (!!contentId && !asset) }
 }
 
 export const useRawAsset = (contentId: string | null) => {

src/shared/components/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CSSTransition } from 'react-transition-group'
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
 import { SvgGlyphImage, SvgGlyphNewChannel, SvgLargeUploadFailed } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
@@ -12,7 +12,6 @@ import {
   SilhouetteAvatar,
   StyledImage,
   StyledSkeletonLoader,
-  StyledTransitionGroup,
 } from './Avatar.style'
 
 export type AvatarProps = {
@@ -60,7 +59,7 @@ export const Avatar: React.FC<AvatarProps> = ({
           <SvgGlyphNewChannel />
         </NewChannelAvatar>
       ) : (
-        <StyledTransitionGroup>
+        <SwitchTransition>
           <CSSTransition
             key={loading ? 'placeholder' : 'content'}
             timeout={parseInt(transitions.timings.loading)}
@@ -78,7 +77,7 @@ export const Avatar: React.FC<AvatarProps> = ({
               <SilhouetteAvatar />
             )}
           </CSSTransition>
-        </StyledTransitionGroup>
+        </SwitchTransition>
       )}
     </Container>
   )

src/shared/components/VideoTileBase/VideoTileBase.tsx

@@ -272,32 +272,21 @@ export const VideoTileBase: React.FC<VideoTileBaseProps> = ({
       )}
       <InfoContainer>
         {showChannel && (
-          <SwitchTransition>
-            <CSSTransition
-              key={isLoadingAvatar ? 'avatar-placeholder' : 'avatar'}
-              timeout={parseInt(transitions.timings.sharp)}
-              classNames={transitions.names.fade}
-            >
-              <AvatarContainer>
-                {isLoading || isLoadingAvatar ? (
-                  <SkeletonLoader rounded />
-                ) : (
-                  <Anchor to={channelHref ?? ''} onClick={createAnchorClickHandler(channelHref)}>
-                    <StyledAvatar
-                      assetUrl={channelAvatarUrl}
-                      channelClickable={channelClickable}
-                      onClick={handleChannelClick}
-                    />
-                  </Anchor>
-                )}
-              </AvatarContainer>
-            </CSSTransition>
-          </SwitchTransition>
+          <AvatarContainer>
+            <Anchor to={channelHref ?? ''} onClick={createAnchorClickHandler(channelHref)}>
+              <StyledAvatar
+                loading={isLoading || isLoadingAvatar}
+                assetUrl={channelAvatarUrl}
+                channelClickable={channelClickable}
+                onClick={handleChannelClick}
+              />
+            </Anchor>
+          </AvatarContainer>
         )}
         <SwitchTransition>
           <CSSTransition
             key={isLoading ? 'text-placeholder' : 'text'}
-            timeout={parseInt(transitions.timings.sharp)}
+            timeout={200}
             classNames={transitions.names.fade}
           >
             <TextContainer>