Add share loading symbol

src/app/components/generator/SchemaGenerator.tsx

@@ -191,6 +191,7 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 	}
 
 	const [shareUrl, setShareUrl] = useState<string | undefined>(undefined)
+	const [shareLoading, setShareLoading] = useState(false)
 	const [shareShown, setShareShown] = useState(false)
 	const [shareCopyActive, shareCopySuccess] = useActiveTimeout({ cooldown: 3000 })
 	const share = () => {
@@ -208,6 +209,7 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 				setShareUrl(`${location.origin}/${gen.url}/?version=${version}`)
 				setShareShown(true)
 			} else {
+				setShareLoading(true)
 				shareSnippet(gen.id, version, output, previewShown)
 					.then(({ id, length, compressed, rate }) => {
 						Analytics.createSnippet(gen.id, id, version, length, compressed, rate)
@@ -220,6 +222,7 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 							setError(e)
 						}
 					})
+					.finally(() => setShareLoading(false))
 			}
 		}
 	}
@@ -326,8 +329,8 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) {
 			<div class={`popup-action action-preview${hasPreview ? ' shown' : ''} tooltipped tip-nw`} aria-label={locale(previewShown ? 'hide_preview' : 'show_preview')} onClick={togglePreview}>
 				{previewShown ? Octicon.x_circle : Octicon.play}
 			</div>
-			<div class={'popup-action action-share shown tooltipped tip-nw'} aria-label={locale('share')} onClick={share}>
-				{Octicon.link}
+			<div class={`popup-action action-share shown tooltipped tip-nw${shareLoading ? ' loading' : ''}`} aria-label={locale(shareLoading ? 'share.loading' : 'share')} onClick={share}>
+				{shareLoading ? Octicon.sync : Octicon.link}
 			</div>
 			<div class={`popup-action action-download${sourceShown ? ' shown' : ''} tooltipped tip-nw`} aria-label={locale('download')} onClick={downloadSource}>
 				{Octicon.download}

src/locales/en.json

@@ -109,6 +109,7 @@
   "settings.fields.path": "Context",
   "settings.fields.name": "Name",
   "share": "Share",
+  "share.loading": "Getting share link...",
   "theme": "Theme",
   "tag/block": "Block Tag",
   "tag/entity_type": "Entity Type Tag",

src/styles/global.css

@@ -895,6 +895,10 @@ main.has-project {
 	cursor: pointer;
 }
 
+.popup-action.loading > svg {
+	animation: 2s linear spinning infinite;
+}
+
 .popup-actions.right-actions {
 	left: 100%;
 	padding-right: 16px;