Add news image loader

packages/web-console/src/scenes/News/index.tsx

@@ -10,6 +10,7 @@ import { Loader, Button } from "@questdb/react-components"
 import { Notification2 } from "styled-icons/remix-line"
 import { db } from "../../store/db"
 import { UnreadItemsIcon } from "../../components/UnreadItemsIcon"
+import { Thumbnail } from "./thumbnail"
 
 const swing = () => {
   let animation = ""
@@ -52,7 +53,6 @@ const Loading = styled.div`
 const Items = styled.div`
   display: grid;
   width: 100%;
-  justify-items: center;
   overflow: auto;
 `
 
@@ -83,13 +83,6 @@ const NewsText = styled(Text).attrs({ color: "foreground" })`
   }
 `
 
-const Thumbnail = styled.img`
-  max-width: 100%;
-  margin: 2rem 0;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  box-shadow: 0 7px 30px -10px ${({ theme }) => theme.color.black};
-`
-
 const News = () => {
   const dispatch = useDispatch()
   const { quest } = useContext(QuestContext)
@@ -198,8 +191,11 @@ const News = () => {
                 newsItem.thumbnail.length > 0 &&
                 newsItem.thumbnail[0].thumbnails.large && (
                   <Thumbnail
+                    containerWidth={460}
                     src={newsItem.thumbnail[0].thumbnails.large.url}
                     alt={`${newsItem.title} thumbnail`}
+                    width={newsItem.thumbnail[0].thumbnails.large.width}
+                    height={newsItem.thumbnail[0].thumbnails.large.height}
                   />
                 )}
 

packages/web-console/src/scenes/News/thumbnail.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from "react"
+import styled from "styled-components"
+import { Loader } from "@questdb/react-components"
+
+const Root = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  margin: 2rem 0;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  box-shadow: 0 7px 30px -10px ${({ theme }) => theme.color.black};
+  overflow: hidden;
+  background: ${({ theme }) => theme.color.backgroundLighter};
+
+  svg {
+    position: absolute;
+  }
+`
+
+const ThumbImg = styled.img<{ loaded: boolean }>`
+  width: 46rem;
+  height: auto;
+
+  ${({ loaded }) => `
+    opacity: ${loaded ? 1 : 0};
+    transition: opacity 0.2s ease-in-out;
+  `}
+`
+export const Thumbnail = ({
+  src,
+  alt,
+  width,
+  height,
+  containerWidth,
+}: {
+  src: string
+  alt: string
+  width: number
+  height: number
+  containerWidth: number
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  const scaledImageWidth = containerWidth
+  const scaledImageHeight = (scaledImageWidth / width) * height
+
+  useEffect(() => {
+    const imgElement = new Image()
+    imgElement.src = src
+
+    imgElement.onload = () => {
+      setIsLoaded(true)
+    }
+  }, [src])
+
+  return (
+    <Root>
+      {!isLoaded && <Loader />}
+      <ThumbImg
+        src={src}
+        alt={alt}
+        width={scaledImageWidth}
+        height={scaledImageHeight}
+        loaded={isLoaded}
+      />
+    </Root>
+  )
+}