fix(Thumbnail): reset on src change

adarshpastakia · Oct 22, 2024 · b62a69e · b62a69e
1 parent 3140fe1
commit b62a69e
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/packages/media/src/thumbnail/Thumbnail.tsx b/packages/media/src/thumbnail/Thumbnail.tsx
@@ -25,7 +25,7 @@ import { AnimationSpinner, CoreIcons, Icon } from "@react-fabric/core";
 import { type CssProp } from "@react-fabric/core/dist/types/types";
 import { getImageColorset, isNumber } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { type SyntheticEvent, useReducer } from "react";
+import { type SyntheticEvent, useEffect, useReducer } from "react";
 import { NsfwOverlay } from "../nsfw/NsfwOverlay";
 import classes from "./Thumbnail.module.css";
 
@@ -66,6 +66,7 @@ interface ThumbnailState {
 
 type ThumbnailActions =
   | { type: "reset" }
+  | { type: "loading" }
   | { type: "loaded"; colorScheme: ThumbnailState["colorScheme"] }
   | { type: "colorScheme" }
   | { type: "errored" };
@@ -86,11 +87,9 @@ export const Thumbnail = ({
     (state: ThumbnailState, action: ThumbnailActions) => {
       if (action.type === "reset") {
         return {
-          src,
-          errorLevel: 0,
-          colorScheme: "light",
-          loading: true,
-          transparent: false,
+          ...state,
+          src: src ?? fallback,
+          errorLevel: !(src ?? fallback) ? 2 : 0,
         } as ThumbnailState;
       }
       if (action.type === "loaded") {
@@ -139,6 +138,10 @@ export const Thumbnail = ({
     });
   };
 
+  useEffect(() => {
+    dispatch({ type: "reset" });
+  }, [src]);
+
   return (
     <div
       className={classNames(