fixed width issue with skeleton screen

enochakinbode · enochakinbode · commit fc30b5f42bbf · 2022-10-09T20:45:19.000-07:00
diff --git a/components/Countries.js b/components/Countries.js
@@ -5,7 +5,7 @@ import React from "react";
 import Card from "./Card";
 
 //utils
-import { SkeletonCard } from "./Skeleton";
+import { SkeletonCard } from "./helpers/Skeleton";
 import { FaArrowUp } from "react-icons/fa";
 
 //animation
diff --git a/components/helpers/AnimationVariants.js b/components/helpers/AnimationVariants.js
@@ -24,7 +24,7 @@ export const cardVariants = {
     y: "0",
     scale: 1,
     transition: {
-      duration: 0.2,
+      duration: 0.6,
     },
   },
 };
diff --git a/components/helpers/Skeleton.js b/components/helpers/Skeleton.js
@@ -1,7 +1,7 @@
 export const SkeletonCard = () => {
   return (
     <>
-      <div className="w-80 mx-auto sm:w-full mt-7 animate-pulse justify-center space-x-1 rounded-md border mb-10  sm:mb-0 pb-6 ">
+      <div className="w-72 mx-auto sm:w-full mt-7 animate-pulse justify-center space-x-1 rounded-md border mb-10  sm:mb-0 pb-6 ">
         <div className="w-full">
           <div className="w-full h-48 bg-skin-skeleton"></div>
           <div>
