Merge pull request #36 from acrossoffwest/feature/debounce-during-ima…

…ges-update add debouncing when updating image previews
hspsh · Jun 21, 2024 · 0660c92 · 0660c92
2 parents bc839e2 + a531ce8
commit 0660c92
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/froncik/components/Images.tsx b/froncik/components/Images.tsx
@@ -8,6 +8,7 @@ import {TemplatesContext} from "./teplatesStore";
 export default function Images({id, fields}: { id: number, fields: Record<string, string> }) {
 
   const [images, loadImages] = useState<undefined | string[]>(undefined)
+  const [updatingImages, setUpdatingImages] = useState(false);
   const ctx = useContext(TemplatesContext)
 
   const debouncedQuery = useCallback(_.debounce((fun) =>
@@ -18,21 +19,30 @@ export default function Images({id, fields}: { id: number, fields: Record<string
 
   useEffect(() => {
     debouncedQuery(
-      () => API.labels.previewImages(id, fields)
-        .then((x) => {
-          x.json().then(x => loadImages(x.images))
-        })
+      () => {
+          setUpdatingImages(true)
+          API.labels.previewImages(id, fields)
+              .then((x) => {
+                  x.json().then(x => loadImages(x.images))
+              })
+              .finally(() => setUpdatingImages(false))
+      }
     )
   }, [id, fields])
 
   return images ?
-    (images.length == 1 ? <CardImg src={`data:image/jpeg;base64,${images[0]}`}/> : <Carousel variant={"dark"}>{
-      images.map(image =>
-        <CarouselItem key={image}>
-          <img style={{width: "100%"}} src={`data:image/jpeg;base64,${image}`}/>
-        </CarouselItem>
-      )
-    }</Carousel>)
+      <>
+          <div className={updatingImages ? 'updating-images' : ''}>
+              {images.length == 1 ? <CardImg src={`data:image/jpeg;base64,${images[0]}`}/> : <Carousel variant={"dark"}>{
+                  images.map(image =>
+                      <CarouselItem key={image}>
+                          <img style={{width: "100%"}} src={`data:image/jpeg;base64,${image}`}/>
+                      </CarouselItem>
+                  )
+              }</Carousel>}
+          </div>
+          {updatingImages && <img className={"preview-preloader"} src={"/preloader.svg"}/>}
+      </>
     : <div>Loading...</div>
 }
 

diff --git a/froncik/public/preloader.svg b/froncik/public/preloader.svg
diff --git a/froncik/styles/globals.css b/froncik/styles/globals.css
@@ -10,3 +10,17 @@ body.loading, body.loading * {
   width: 100%;
   text-align: right;
 }
+
+.preview-preloader {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+.updating-images {
+  -webkit-filter: blur(2px);
+  -moz-filter: blur(2px);
+  -o-filter: blur(2px);
+  -ms-filter: blur(2px);
+  filter: blur(2px);
+}