diff --git a/froncik/components/Images.tsx b/froncik/components/Images.tsx
index 49c4a4b..73f864d 100644
--- 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
new file mode 100644
index 0000000..49f065b
--- /dev/null
+++ b/froncik/public/preloader.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M50 15A35 35 0 1 0 74.74873734152916 25.251262658470843" fill="none" stroke="#00cc99" stroke-width="12"></path>
+        <path d="M49 3L49 27L61 15L49 3" fill="#00cc99"></path>
+        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/froncik/styles/globals.css b/froncik/styles/globals.css
index 4c97c93..7b84c9f 100644
--- 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);
+}
\ No newline at end of file