diff --git a/src/app/components/generator/SchemaGenerator.tsx b/src/app/components/generator/SchemaGenerator.tsx index 07c87f57..dba70c57 100644 --- a/src/app/components/generator/SchemaGenerator.tsx +++ b/src/app/components/generator/SchemaGenerator.tsx @@ -191,6 +191,7 @@ export function SchemaGenerator({ gen, allowedVersions }: Props) { } const [shareUrl, setShareUrl] = useState(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) {
{previewShown ? Octicon.x_circle : Octicon.play}
-
- {Octicon.link} +
+ {shareLoading ? Octicon.sync : Octicon.link}
{Octicon.download} diff --git a/src/locales/en.json b/src/locales/en.json index e881249e..efdb99ee 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/styles/global.css b/src/styles/global.css index 86297494..b81eb716 100644 --- a/src/styles/global.css +++ b/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;