Get rid of jumping video hero title (#1262)

src/components/VideoHero/VideoHero.style.ts

@@ -59,7 +59,7 @@ export const GradientOverlay = styled.div`
     ${colors.transparentBlack[54]};
 `
 
-export const InfoContainer = styled.div<{ isLoading: boolean }>`
+export const InfoContainer = styled.div`
   position: relative;
   padding-bottom: ${sizes(16)};
   width: 100%;
@@ -89,6 +89,8 @@ export const StyledChannelLink = styled(ChannelLink)`
 `
 
 export const TitleContainer = styled.div`
+  min-height: 80px;
+
   a {
     text-decoration: none;
   }
@@ -111,10 +113,15 @@ export const Title = styled(Text)`
 `
 
 export const TitleSkeletonLoader = styled(SkeletonLoader)`
-  margin-bottom: ${sizes(4)};
+  width: 90%;
+  margin-bottom: ${sizes(2)};
+
+  ${media.compact} {
+    width: 380px;
+  }
 
   ${media.medium} {
-    margin-bottom: ${sizes(5)};
+    margin-bottom: ${sizes(3)};
   }
 `
 

src/components/VideoHero/VideoHero.tsx

@@ -5,7 +5,6 @@ import { absoluteRoutes } from '@/config/routes'
 import { AssetType, useAsset } from '@/providers/assets'
 import { Button } from '@/shared/components/Button'
 import { GridItem, LayoutGrid } from '@/shared/components/LayoutGrid'
-import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
 import { VideoPlayer } from '@/shared/components/VideoPlayer'
 import { SvgActionPlay } from '@/shared/icons/ActionPlay'
 import { SvgActionSoundOff } from '@/shared/icons/ActionSoundOff'
@@ -74,7 +73,7 @@ export const VideoHero: React.FC = () => {
           <GradientOverlay />
         </Media>
       </MediaWrapper>
-      <InfoContainer isLoading={!coverVideo}>
+      <InfoContainer>
         <StyledChannelLink
           variant="secondary"
           id={coverVideo?.video.channel.id}
@@ -92,9 +91,8 @@ export const VideoHero: React.FC = () => {
                 </>
               ) : (
                 <>
-                  <TitleSkeletonLoader width={380} height={60} />
-                  <SkeletonLoader width={300} height={20} bottomSpace={4} />
-                  <SkeletonLoader width={200} height={20} />
+                  <TitleSkeletonLoader height={34} />
+                  <TitleSkeletonLoader height={34} />
                 </>
               )}
             </TitleContainer>