From 95d4df7a1b44996644d71491ab634d6017d12612 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 7 May 2025 10:48:16 +0200
Subject: [PATCH] ui: loading badges for spot videos

---
 .../Spots/SpotPlayer/components/SpotPlayerHeader.tsx     | 9 +++++++--
 frontend/app/components/Spots/SpotsList/SpotListItem.tsx | 4 ++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
index 6bf8671ce..29023c4d7 100644
--- a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerHeader.tsx
@@ -32,6 +32,7 @@ import { Avatar, Icon } from 'UI';
 import { TABS, Tab } from '../consts';
 import AccessModal from './AccessModal';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify'
 
 const spotLink = spotsList();
 
@@ -89,8 +90,12 @@ function SpotPlayerHeader({
 
   const onMenuClick = async ({ key }: { key: string }) => {
     if (key === '1') {
+      const loader = toast.loading('Retrieving Spot video...')
       const { url } = await spotStore.getVideo(spotStore.currentSpot!.spotId);
       await downloadFile(url, `${spotStore.currentSpot!.title}.mp4`);
+      setTimeout(() => {
+        toast.dismiss(loader)
+      }, 0)
     } else if (key === '2') {
       spotStore.deleteSpot([spotStore.currentSpot!.spotId]).then(() => {
         history.push(spotsList());
@@ -245,12 +250,11 @@ function SpotPlayerHeader({
 }
 
 async function downloadFile(url: string, fileName: string) {
-  const { t } = useTranslation();
   try {
     const response = await fetch(url);
 
     if (!response.ok) {
-      throw new Error(t('Network response was not ok'));
+      throw new Error('Network response was not ok');
     }
 
     const blob = await response.blob();
@@ -263,6 +267,7 @@ async function downloadFile(url: string, fileName: string) {
     document.body.removeChild(a);
     URL.revokeObjectURL(blobUrl);
   } catch (error) {
+    toast.error('Error downloading file.')
     console.error('Error downloading file:', error);
   }
 }
diff --git a/frontend/app/components/Spots/SpotsList/SpotListItem.tsx b/frontend/app/components/Spots/SpotsList/SpotListItem.tsx
index 573a2dd81..598706654 100644
--- a/frontend/app/components/Spots/SpotsList/SpotListItem.tsx
+++ b/frontend/app/components/Spots/SpotsList/SpotListItem.tsx
@@ -80,8 +80,12 @@ function SpotListItem({
       case 'rename':
         return setIsEdit(true);
       case 'download':
+        const loader = toast.loading('Retrieving Spot video...')
         const { url } = await onVideo(spot.spotId);
         await downloadFile(url, `${spot.title}.mp4`);
+        setTimeout(() => {
+          toast.dismiss(loader)
+        }, 0)
         return;
       case 'copy':
         copy(