Initially render with a low quality thumbnail for loading speeds, then load a higher res thumbnail when idle

[FunctionDJ]

trafficstars

Title pretty much says it all. I was curious so i wrote this custom hook who's return value i pass to the poster prop:

const useKindaLazyYouTubeThumbnail = () => {
  const [imgRes, setImgRes] = useState<"mqdefault" | "maxresdefault">("mqdefault");

  useEffect(() => {
    setTimeout(() => {
      setImgRes("maxresdefault");
    }, 5000);
  }, []);

  return imgRes;
};

What do you guys think? I noticed that changing the poster will show a blank thumbnail for a brief moment because the new thumbnail needs to get downloaded. I've already tried putting a prefetch element into the

, but couldn't get it to work yet (it doesn't create a request):

<link rel="prefetch" href={`https://i.ytimg.com/vi_webp/${id}/maxresdefault.webp`}/>

By the way i think it would be cool if the type for the poster prop was importable. You can technically get to it through Parameters<typeof LiteYouTubeEmbed>["0"]["poster"] but yeah i'll let it speak for itself lmao

I'll make a PR for that little export.

[ibrahimcesar]

Thanks @FunctionDJ

[LichLord91]

@FunctionDJ used this hook today, clever workaround! I like it.

[FunctionDJ]

This hook has a disadvantage: the thumbnail will briefly blink because when the timeout runs, the state update will immediately unload the old image and then start loading the new image, so there's a "downtime". I was playing around with dynamically adding a <link> prefetch element to preload the bigger thumbnail but couldn't get that to work. That's why i didn't end up using the hook i wrote above. Maybe someone has a better solution :)