update

package.json

@@ -78,6 +78,7 @@
     "react-router": "^7.8.2",
     "react-router-dom": "^7.8.2",
     "react-slidedown": "^2.4.7",
+    "react-spinners": "^0.17.0",
     "react-tabs": "^6.1.0",
     "react-toastify": "^11.0.5",
     "react-tooltip": "^5.29.1",

pnpm-lock.yaml

@@ -209,6 +209,9 @@ importers:
       react-slidedown:
         specifier: ^2.4.7
         version: 2.4.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react-spinners:
+        specifier: ^0.17.0
+        version: 0.17.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react-tabs:
         specifier: ^6.1.0
         version: 6.1.0(react@19.1.1)
@@ -4829,6 +4832,12 @@ packages:
       react: ^16.3.0 || 17
       react-dom: ^16.3.0 || 17
 
+  react-spinners@0.17.0:
+    resolution: {integrity: sha512-L/8HTylaBmIWwQzIjMq+0vyaRXuoAevzWoD35wKpNTxxtYXWZp+xtgkfD7Y4WItuX0YvdxMPU79+7VhhmbmuTQ==}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-tabs@6.1.0:
     resolution: {integrity: sha512-6QtbTRDKM+jA/MZTTefvigNxo0zz+gnBTVFw2CFVvq+f2BuH0nF0vDLNClL045nuTAdOoK/IL1vTP0ZLX0DAyQ==}
     peerDependencies:
@@ -11218,6 +11227,11 @@ snapshots:
       react-dom: 19.1.1(react@19.1.1)
       tslib: 2.8.1
 
+  react-spinners@0.17.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
   react-tabs@6.1.0(react@19.1.1):
     dependencies:
       clsx: 2.1.1

src/entities/common/ui/cash-receipt-sample.tsx

@@ -3,11 +3,20 @@ import { snackBar } from '@/shared/lib';
 import { toPng } from 'html-to-image';
 import { useTranslation } from 'react-i18next';
 import '@/shared/ui/assets/css/style-tax-invoice.css';
-import { useEffect } from 'react';
+import { useEffect, useState, CSSProperties } from 'react';
+import { ClipLoader, FadeLoader } from 'react-spinners';
 import { NumericFormat } from 'react-number-format';
 import { AmountInfo, CustomerInfo, IssueInfo, MerchantInfo, ProductInfo, TransactionInfo } from '@/entities/transaction/model/types';
 import moment from 'moment';
 
+const override: CSSProperties = {
+  position: 'fixed',
+  display: 'block',
+  margin: '0 auto',
+  top: '50%',
+  left: '50%',
+};
+
 export interface CashReceiptSampleProps {
   cashReceiptSampleOn: boolean;
   setCashReceiptSampleOn: (cashReceiptSampleOn: boolean) => void;
@@ -29,6 +38,9 @@ export const CashReceiptSample = ({
   customerInfo,
   productInfo
 }: CashReceiptSampleProps) => {
+  let [loading, setLoading] = useState<boolean>(true);
+  let [color, setColor] = useState<string>('#0b0606');
+
   const { t } = useTranslation();
 
   const downloadImage = () => {
@@ -39,8 +51,10 @@ export const CashReceiptSample = ({
       link.href = image;
       link.click();
       snackBar(t('common.imageRequested'), function(){
-        //onClickToClose();
+        onClickToClose();
       });
+    }).finally(() => {
+      setLoading(false);
     });
   };
   const onClickToClose = () => {
@@ -66,6 +80,7 @@ export const CashReceiptSample = ({
 
   useEffect(() => {
     if(!!cashReceiptSampleOn){
+      setLoading(true);
       setTimeout(() => {
         downloadImage();
       }, 300);
@@ -241,6 +256,21 @@ export const CashReceiptSample = ({
           </div>
         </div>
       </div>
+      { !!loading &&
+        <>
+          <div 
+            className="bg-dim"
+            style={{ opacity: '0.4' }}
+          ></div>
+          <FadeLoader
+            color={ color }
+            loading={ loading }
+            cssOverride={ override }
+            aria-label="Loading Spinner"
+            data-testid="loader" 
+          />
+        </>
+      }
     </>
   );
 };