Gif Picker: Fix some gifs do not load

src/components/common/GifButton.scss

@@ -21,25 +21,21 @@
   }
 
   .thumbnail {
+    width: 100%;
+    height: 100%;
     background-size: cover !important;
     background: transparent no-repeat center;
   }
 
-  .thumbnail ~ video {
+  .preview, video {
     position: absolute;
-  }
-
-  .thumbnail, video {
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
 
-  &:not(.shown) {
-    display: block !important;
-    visibility: hidden;
-  }
-
   .Spinner {
     position: absolute;
     pointer-events: none;

src/components/common/GifButton.tsx

@@ -33,7 +33,7 @@ const GifButton: FC<OwnProps> = ({
   // eslint-disable-next-line no-null/no-null
   const videoRef = useRef<HTMLVideoElement>(null);
 
-  const hasThumbnail = gif.thumbnail && !!gif.thumbnail.dataUri;
+  const hasThumbnail = Boolean(gif.thumbnail?.dataUri);
   const localMediaHash = `gif${gif.id}`;
   const isIntersecting = useIsIntersecting(ref, observeIntersection);
   const loadAndPlay = isIntersecting && !isDisabled;
@@ -41,9 +41,9 @@ const GifButton: FC<OwnProps> = ({
   const thumbRef = useCanvasBlur(gif.thumbnail?.dataUri, Boolean(previewBlobUrl));
   const videoData = useMedia(localMediaHash, !loadAndPlay, ApiMediaFormat.BlobUrl);
   const shouldRenderVideo = Boolean(loadAndPlay && videoData);
-  const { transitionClassNames } = useTransitionForMedia(hasThumbnail || previewBlobUrl || videoData, 'slow');
   const { isBuffered, bufferingHandlers } = useBuffering(true);
   const shouldRenderSpinner = loadAndPlay && !isBuffered;
+  const isVideoReady = loadAndPlay && isBuffered;
 
   useVideoCleanup(videoRef, [shouldRenderVideo]);
 
@@ -58,7 +58,6 @@ const GifButton: FC<OwnProps> = ({
   const fullClassName = buildClassName(
     'GifButton',
     gif.width && gif.height && gif.width < gif.height ? 'vertical' : 'horizontal',
-    transitionClassNames,
     localMediaHash,
     className,
   );
@@ -74,16 +73,19 @@ const GifButton: FC<OwnProps> = ({
         <canvas
           ref={thumbRef}
           className="thumbnail"
+          // We need to always render to avoid blur re-calculation
+          // @ts-ignore
+          style={isVideoReady ? 'display: none;' : undefined}
         />
       )}
-      {!hasThumbnail && previewBlobUrl && (
+      {previewBlobUrl && !isVideoReady && (
         <img
           src={previewBlobUrl}
           alt=""
-          className="thumbnail"
+          className="preview"
         />
       )}
-      {(shouldRenderVideo || previewBlobUrl) && (
+      {shouldRenderVideo && (
         <video
           ref={videoRef}
           autoPlay