From 2557c40c336f0e1f6a1dde14caafcc591e5f4cc8 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 29 Apr 2024 14:31:59 +0530
Subject: [PATCH] imporve share styling

---
 src/components/Share.jsx    | 24 +++++++++++++++----
 src/components/Skeleton.jsx |  3 +++
 src/style.css               | 46 +++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Skeleton.jsx

diff --git a/src/components/Share.jsx b/src/components/Share.jsx
index 6b200e1..eb0d137 100644
--- a/src/components/Share.jsx
+++ b/src/components/Share.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'preact/hooks';
-import { ProBadge } from './ProBadge';
+import { Skeleton } from './Skeleton';
 import { HStack, Stack, VStack } from './Stack';
 import Switch from './Switch';
 import { itemService } from '../itemService';
@@ -114,9 +114,25 @@ export function Share({
 			{!user?.isPro ? (
 				<VStack gap={1} align="stretch">
 					<p>
-						Public creations available: {FREE_PUBLIC_ITEM_COUNT}. Used:{' '}
-						{publicItemCount === undefined ? '-' : publicItemCount}. Left:{' '}
-						{Math.max(0, FREE_PUBLIC_ITEM_COUNT - publicItemCount)}
+						<HStack gap={3} justify="flex-start">
+							<span>Public creations available: {FREE_PUBLIC_ITEM_COUNT}</span>
+							<span>
+								Used:{' '}
+								{publicItemCount === undefined ? (
+									<Skeleton width="2ch" />
+								) : (
+									publicItemCount
+								)}
+							</span>
+							<span>
+								Left:{' '}
+								{publicItemCount === undefined ? (
+									<Skeleton width="2ch" />
+								) : (
+									Math.max(0, FREE_PUBLIC_ITEM_COUNT - publicItemCount)
+								)}
+							</span>
+						</HStack>
 					</p>
 					<p>
 						<HStack gap={1}>
diff --git a/src/components/Skeleton.jsx b/src/components/Skeleton.jsx
new file mode 100644
index 0000000..e711fe5
--- /dev/null
+++ b/src/components/Skeleton.jsx
@@ -0,0 +1,3 @@
+export const Skeleton = ({ width }) => {
+	return <div className="skeleton" style={{ width }}></div>;
+};
diff --git a/src/style.css b/src/style.css
index c3d0b58..a9825c4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2369,6 +2369,52 @@ while the theme CSS file is loading */
 		inset 0px 1px 3px rgba(255, 255, 255, 0.1);
 }
 
+.skeleton {
+	display: inline-block;
+	height: 0.5em;
+	background-color: currentColor;
+	border-radius: 999px;
+	animation: 2s linear infinite skeleton;
+	transform-origin: left;
+}
+
+@keyframes skeleton {
+	20% {
+		transform-origin: left;
+		opacity: 1;
+		transform: scaleX(1.5);
+		opacity: 0.5;
+	}
+	20.1% {
+		transform-origin: right;
+		transform: scaleX(1.5) translateX(33%);
+	}
+	50% {
+		transform-origin: right;
+		transform: scaleX(1) translateX(50%);
+		opacity: 1;
+	}
+	70% {
+		transform-origin: right;
+		transform: scaleX(1.5) translateX(33%);
+	}
+	70.1% {
+		transform-origin: left;
+		transform: scaleX(1.5);
+	}
+	90% {
+		transform-origin: left;
+		transform: scaleX(1);
+		opacity: 0.5;
+	}
+
+	/* 100% {
+	  transform-origin: right;
+	  transform: scaleX(1.5) translateX(33%);
+	  opacity: 1;
+	} */
+}
+
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;