fix broken image layout

package-lock.json

@@ -16,6 +16,7 @@
         "next-intl": "^3.11.3",
         "react": "^18",
         "react-dom": "^18",
+        "react-image": "^4.1.0",
         "video.js": "^8.10.0",
         "videojs-hls-quality-selector": "^2.0.0"
       },
@@ -4043,6 +4044,16 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-image": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-image/-/react-image-4.1.0.tgz",
+      "integrity": "sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==",
+      "peerDependencies": {
+        "@babel/runtime": ">=7",
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "next-intl": "^3.11.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-image": "^4.1.0",
     "video.js": "^8.10.0",
     "videojs-hls-quality-selector": "^2.0.0"
   },

src/components/Layout/Results/Wrapper/Gallery/Thumbnail/Thumbnail.module.scss

@@ -14,9 +14,21 @@
     }
 }
 
-.image {
+.image, .imgPlaceholder {
     border-radius: $spacing_4;
     width: 100%;
+
+    @media only screen and (max-width: $tablet) {
+        height: $spacing_64 + $spacing_8;
+    }
+
+    @media only screen and (min-width: $tablet) {
+        height: $spacing_64 * 3;
+    }
+}
+
+.imgPlaceholder {
+    background-color: $colors_yellow_focus;
 }
 
 .thumbnailContainer {
@@ -47,4 +59,10 @@
         }
     }
 
+    .image, .imgPlaceholder {
+        @media only screen and (min-width: $small) {
+            height: $spacing_64 * 3;
+        }
+    }
+    
 }

src/components/Layout/Results/Wrapper/Gallery/Thumbnail/index.tsx

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import { Img } from 'react-image'
+
 import classNames from 'classnames';
 
 import Link from 'next/link'
@@ -25,7 +27,7 @@ const Thumbnail: React.FC<Props> = (props) => {
     return (
         <div className={classNames(style.thumbnailContainer, { [style.show]: show } )}>
             <Link href={`/${locale}/video/${encodedUri}`}>
-                <img className={style.image} src={imgUrl} />
+                <Img className={style.image} src={imgUrl} unloader={<div className={style.imgPlaceholder}></div>} />
                 <div className={style.text}>{text}</div>
             </Link>
         </div>

src/styles/_breakpoints.scss

@@ -1,3 +1,4 @@
+$small: 20em;
 $portrait: 40em;
 $tablet: 48em;
 $laptop: 64em;

src/styles/_spacing.scss

@@ -2,3 +2,4 @@ $spacing_4: 4px;
 $spacing_8: 8px;
 $spacing_16: 16px;
 $spacing_32: 32px;
+$spacing_64: 64px;