ui changes

components/Myvpncard.tsx

@@ -331,36 +331,24 @@ const MyVpnCard: React.FC<ReviewCardProps> = ({
 
       {loading && (
         <div
-          style={{
-            position: "absolute",
-            top: 700,
-            left: 0,
-            width: "100%",
-            height: "100%",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              zIndex: 9999,
-            }}
-          >
-            <div
-              style={{
-                border: "8px solid #f3f3f3",
-                borderTop: "8px solid #3498db",
-                borderRadius: "50%",
-                width: "50px",
-                height: "50px",
-                animation: "spin 1s linear infinite",
-              }}
-            >
-              {/* <Loader/> */}
+        style={{ backgroundColor: "#222944E5" }}
+        className='flex overflow-y-auto overflow-x-hidden fixed inset-0 z-50 justify-center items-center w-full max-h-full'
+        id='popupmodal'
+      >
+        <div className='relative p-4 lg:w-1/5 w-full max-w-2xl max-h-full'>
+          <div className='relative rounded-lg shadow'>
+            <div className='flex justify-center gap-4'>
+              <img
+                className='w-12 animate-spin duration-[3000] h-12'
+                src='/Loadingsotreus.png'
+                alt='Loading icon'
+              />
+
+              <span className='text-white mt-2'>Loading...</span>
             </div>
           </div>
         </div>
+      </div>
       )}
     </div>
   );

components/MyvpncardDedicated.tsx

@@ -203,36 +203,24 @@ const MyVpnCardDedicated: React.FC<ReviewCardProps> = ({
                 </div>
                 {loading && (
         <div
-          style={{
-            position: "absolute",
-            top: 700,
-            left: 0,
-            width: "100%",
-            height: "100%",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              zIndex: 9999,
-            }}
-          >
-            <div
-              style={{
-                border: "8px solid #f3f3f3",
-                borderTop: "8px solid #3498db",
-                borderRadius: "50%",
-                width: "50px",
-                height: "50px",
-                animation: "spin 1s linear infinite",
-              }}
-            >
-              {/* <Loader/> */}
+        style={{ backgroundColor: "#222944E5" }}
+        className='flex overflow-y-auto overflow-x-hidden fixed inset-0 z-50 justify-center items-center w-full max-h-full'
+        id='popupmodal'
+      >
+        <div className='relative p-4 lg:w-1/5 w-full max-w-2xl max-h-full'>
+          <div className='relative rounded-lg shadow'>
+            <div className='flex justify-center gap-4'>
+              <img
+                className='w-12 animate-spin duration-[3000] h-12'
+                src='/Loadingsotreus.png'
+                alt='Loading icon'
+              />
+
+              <span className='text-white mt-2'>Loading...</span>
             </div>
           </div>
         </div>
+      </div>
       )}
 
         {delvpn && (