update

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" 
+          />
+        </>
+      }
     </>
   );
 };