hide alt text on loading images

packages/app/src/mocking/data/mockVideos.ts

@@ -73,7 +73,7 @@ const rawVideos = [
       'In hac habitasse platea dictumst. Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem. Integer tincidunt ante vel ipsum. Praesent blandit lacinia erat. Vestibulum sed magna at nunc commodo placerat. Praesent blandit. Nam nulla. Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.',
     views: 870023,
     publishedOnJoystreamAt: '2020-01-07T13:17:49Z',
-    duration: 1,
+    duration: 16,
   },
   {
     id: 'c557b154-ee2a-4548-a0c5-4a74774ecf58',

packages/app/src/shared/components/Avatar/Avatar.style.tsx

@@ -10,7 +10,7 @@ const container: StyleFn = (_, { size = 'default' }) => {
   return {
     borderRadius: 999,
     minWidth: width,
-    backgroundColor: colors.gray[500],
+    backgroundColor: colors.gray[400],
     color: colors.white,
     display: 'flex',
     justifyContent: 'center',

packages/app/src/shared/components/ChannelPreview/ChannelPreview.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import Avatar from '../Avatar'
 import { formatNumberShort } from '@/utils/number'
 import ChannelPreviewBase from './ChannelPreviewBase'
 import { typography } from '../../theme'
+import { Avatar } from '..'
 
 type ChannelPreviewProps = {
   name: string
@@ -13,7 +13,7 @@ type ChannelPreviewProps = {
 }
 
 const ChannelPreview: React.FC<ChannelPreviewProps> = ({ name, avatarURL, views, className }) => {
-  const avatarNode = <Avatar img={avatarURL} />
+  const avatarNode = <StyledAvatar img={avatarURL} />
   const nameNode = <NameHeader>{name}</NameHeader>
   const metaNode = <MetaSpan>{formatNumberShort(views)} views</MetaSpan>
 
@@ -30,4 +30,9 @@ const MetaSpan = styled.span`
   line-height: 1.43;
 `
 
+export const StyledAvatar = styled(Avatar)`
+  width: 100%;
+  height: 100%;
+`
+
 export default ChannelPreview

packages/app/src/shared/components/VideoPreview/VideoPreview.styles.tsx

@@ -11,11 +11,13 @@ type ChannelProps = {
 }
 
 export const CoverImage = styled.img<CoverImageProps>`
+  display: block;
   width: 100%;
   height: 100%;
-  background: linear-gradient(${colors.gray[300]}, ${colors.gray[700]});
+  background-color: ${colors.gray['400']};
   background-size: cover;
   object-fit: cover;
+  color: transparent;
 `
 
 export const CoverHoverOverlay = styled.div`