u

src/components/tiles/CategoryTile.jsx

@@ -9,7 +9,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import ThumbHashImage from '../article/ThumbHashImage';
+import { getThumbHashDataUrl, getCachedImage, imageCache } from '../article/ThumbHashImage';
 import { thumb } from '../../api';
 import { tileBaseSx } from 'dashgui/tiles';
 
@@ -195,36 +195,56 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
  * ThumbHash is shown immediately as a placeholder; the thumb fades in once loaded.
  */
 class CategoryBackdrop extends PureComponent {
-  state = { thumbLoaded: false };
+  constructor(props) {
+    super(props);
+    this.thumbUrl = getThumbHashDataUrl(props.thumbHash);
+    this.isCached = Boolean(getCachedImage(props.fullHash));
+  }
 
   componentDidUpdate(prevProps) {
+    if (prevProps.thumbHash !== this.props.thumbHash) {
+      this.thumbUrl = getThumbHashDataUrl(this.props.thumbHash);
+    }
     if (prevProps.fullHash !== this.props.fullHash) {
-      this.setState({ thumbLoaded: false });
+      this.isCached = Boolean(getCachedImage(this.props.fullHash));
+      this.forceUpdate();
     }
   }
 
-  handleThumbLoad = () => {
-    this.setState({ thumbLoaded: true });
-  };
-
-  handleThumbError = () => {
-    this.setState({ thumbLoaded: false });
+  handleLoad = (e) => {
+    if (this.props.fullHash && e.target) {
+      imageCache.set(this.props.fullHash, e.target);
+    }
   };
 
   render() {
-    const { thumbHash, fullHash } = this.props;
-    const { thumbLoaded } = this.state;
-    if (!thumbHash && !fullHash) return null;
+    const { fullHash } = this.props;
+    if (!this.thumbUrl && !fullHash) return null;
+    const isCached = this.isCached || Boolean(getCachedImage(fullHash));
     return (
       <Box sx={{ position: 'absolute', inset: 0, zIndex: 0, overflow: 'hidden' }}>
-        {thumbHash && !thumbLoaded ? <ThumbHashImage thumbHash={thumbHash} /> : null}
-        {fullHash ? (
+        {!isCached && this.thumbUrl ? (
           <Box
             component="img"
-            src={thumb.url(fullHash)}
+            src={this.thumbUrl}
             alt=""
-            onLoad={this.handleThumbLoad}
-            onError={this.handleThumbError}
+            aria-hidden
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              display: 'block',
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+        ) : null}
+        {fullHash ? (
+          <Box
+            component="img"
+            src={thumb.url(fullHash)}
+            alt=""
+            onLoad={this.handleLoad}
             sx={{
               position: 'absolute',
               inset: 0,
@@ -232,7 +252,6 @@ class CategoryBackdrop extends PureComponent {
               width: '100%',
               height: '100%',
               objectFit: 'cover',
-              opacity: thumbLoaded ? 1 : 0,
             }}
           />
         ) : null}