diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index 132a7b3d..06ef7287 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -7,63 +7,68 @@ import { Item } from "../../../../types";
 
 
 
-export function HeaderView({item, setItemFormPopup}: {
-    item : Item,
-    setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
+export function HeaderView({ item, setItemFormPopup }: {
+  item: Item,
+  setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
 }) {
 
-    const removeItem = useRemoveItem();
-  
-    const map = useMap();
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const removeItem = useRemoveItem();
+
+  const map = useMap();
+
+  const removeItemFromMap = (event: React.MouseEvent<HTMLElement>) => {
+    setLoading(true);
+    item.api?.deleteItem!(item.id)
+      .then(() => removeItem(item))
+      .then(() => map.closePopup())
+      .then(()=>setLoading(false))
+      .catch(err => console.log(err));
+
+    event.stopPropagation();
+  }
+
+  const openEditPopup = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    map.closePopup();
+    if (setItemFormPopup)
+      setItemFormPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer, item: item, setItemFormPopup: setItemFormPopup })
+  }
 
-    const removeItemFromMap = (event: React.MouseEvent<HTMLElement>) => {
-        item.api?.deleteItem!(item.id)
-        .then( () =>  removeItem(item))
-        .then(()=> map.closePopup())
-        .catch(err => console.log(err));
-    
-        event.stopPropagation();
-      }
-    
-      const openEditPopup = (event: React.MouseEvent<HTMLElement>) => {
-        event.stopPropagation();
-        map.closePopup();
-        if (setItemFormPopup)
-          setItemFormPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer, item: item, setItemFormPopup: setItemFormPopup })
-      }
-      
   return (
     <div className='tw-grid tw-grid-cols-6 tw-pb-2'>
-    <div className='tw-col-span-5'>
-      <b className="tw-text-xl tw-font-bold">{item.name}</b>
-    </div>
-    <div className='tw-col-span-1'>
-      {item.api &&
-      <div className="tw-dropdown tw-dropdown-bottom">
-        <label tabIndex={0} className="tw-btn tw-m-1 tw-bg-white hover:tw-bg-white tw-text-gray-500 hover:tw-text-gray-700 tw-leading-3 tw-border-none tw-min-h-0 tw-h-4">
-          <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-          </svg>
-        </label>
-        <ul tabIndex={0} className="tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box">
-          {item.api.updateItem && <li>
-            <a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-blue-800 hover:tw-text-gray-700' onClick={openEditPopup}>
+      <div className='tw-col-span-5'>
+        <b className="tw-text-xl tw-font-bold">{item.name}</b>
+      </div>
+      <div className='tw-col-span-1'>
+        {item.api &&
+          <div className="tw-dropdown tw-dropdown-bottom">
+            <label tabIndex={0} className="tw-btn tw-m-1 tw-bg-white hover:tw-bg-white tw-text-gray-500 hover:tw-text-gray-700 tw-leading-3 tw-border-none tw-min-h-0 tw-h-4">
               <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
               </svg>
-            </a>
-          </li>}
+            </label>
+            <ul tabIndex={0} className="tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box">
+              {item.api.updateItem && <li>
+                <a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-blue-800 hover:tw-text-gray-700' onClick={openEditPopup}>
+                  <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                  </svg>
+                </a>
+              </li>}
 
-          {item.api.deleteItem && <li>
-            <a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-red-800 hover:tw-text-red-950' onClick={removeItemFromMap}>
-              <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
-              </svg>
-            </a>
-          </li>}
-        </ul>
-      </div>}
+              {item.api.deleteItem && <li>
+                <a className='tw-bg-white hover:tw-bg-gray-300 !tw-text-red-800 hover:tw-text-red-950' onClick={removeItemFromMap}>
+                  {loading ? <span className="tw-loading tw-loading-spinner tw-loading-sm"></span>
+                    :
+                    <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
+                      <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
+                    </svg>}
+                </a>
+              </li>}
+            </ul>
+          </div>}
+      </div>
     </div>
-  </div>
   )
 }