From fb2f16700274ec8d6a520a5b33095001590b59d9 Mon Sep 17 00:00:00 2001
From: lakansantos <rizesuoracle25@gmail.com>
Date: Wed, 1 May 2024 11:11:37 +0800
Subject: [PATCH] Added skeleton and fixed button placement

---
 app/modules/map/MapDetails.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/modules/map/MapDetails.tsx b/app/modules/map/MapDetails.tsx
index 4d648ac..3a0cbce 100644
--- a/app/modules/map/MapDetails.tsx
+++ b/app/modules/map/MapDetails.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, {useState} from 'react';
+import Image from 'next/image';
 import {
   Box,
   Button,
@@ -6,6 +7,7 @@ import {
   CardContent,
   CardMedia,
   Divider,
+  Skeleton,
   ThemeProvider,
   Typography,
   createTheme,
@@ -65,6 +67,9 @@ const MapDetails = ({data}: {data: Country}) => {
 
   const {openTab, toggleOpenTab} = useToggleSideMap();
 
+  const [isImageRendered, setIsImageRendered] = useState(false);
+
+  console.log(isImageRendered);
   return (
     <Box
       sx={{
@@ -83,6 +88,7 @@ const MapDetails = ({data}: {data: Country}) => {
           variant="contained"
           sx={{
             top: '50%',
+            transform: 'translateY(-50%)',
             right: -32,
             zIndex: -1,
             height: 70,
@@ -140,16 +146,21 @@ const MapDetails = ({data}: {data: Country}) => {
               N/A
             </Box>
           ) : (
-            <CardMedia
-              component="img"
-              image={coatOfArms.svg}
-              title=""
-              sx={{
-                height: 100,
-                width: 100,
-                objectFit: 'fill',
-              }}
-            />
+            <React.Fragment>
+              <Image
+                height={100}
+                width={100}
+                src={coatOfArms.svg}
+                style={{
+                  opacity: isImageRendered ? '1' : '0',
+                }}
+                alt="image"
+                onLoad={() => setIsImageRendered(true)}
+              />
+              {!isImageRendered && (
+                <Skeleton variant="rectangular" width={100} height={100} />
+              )}
+            </React.Fragment>
           )}
         </CardContent>
         <Divider />