feat: revamp loading card

Author: arunjaindev

src/Shared/Components/LoadingCard.tsx

@@ -4,14 +4,18 @@ interface LoadingCardType {
 
 const LoadingCard = ({ wider }: LoadingCardType) => (
     <div
-        className={`app-details-info-card pointer flex left bg__primary br-8 mr-12 lh-20 ${wider ? 'w-250' : 'w-200'}`}
+        // TODO: Remove margin and use gap
+        className={`flexbox-col ${wider ? 'w-250' : 'w-200'} bg__primary border__secondary-translucent br-8 mr-16`}
+        style={{
+            boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',
+        }}
     >
-        <div className="app-details-info-card__top-container">
-            <div className="shimmer-loading w-120 h-14 br-2 mb-6" />
-            <div className="shimmer-loading w-80px h-18 br-2 mb-6" />
+        <div className="flexbox-col dc__gap-8 px-12 pt-12 pb-8">
+            <span className="w-60 h-14 shimmer" />
+            <span className="w-120 h-18 shimmer" />
         </div>
-        <div className="app-details-info-card__bottom-container">
-            <div className="shimmer-loading w-100 h-14 br-2" />
+        <div className="flexbox px-12 py-10 border__secondary--top">
+            <span className="w-44 h-14 shimmer" />
         </div>
     </div>
 )