Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Added progress spinner to the theme upload button (#18358)

Browse source 
no issue

- Added a progress spinner to the theme upload button in AdminX for
better UX.

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 68bfc1b</samp>

Improved user feedback for theme upload feature. Added a loading
indicator to the `ThemeModal` component to show the progress of the
`uploadTheme` function.
This commit is contained in:
Ronald Langeveld 2023-09-26 18:38:09 +07:00 • committed by GitHub
parent 8e83836de9
commit 5161009e56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
View file

@ -47,6 +47,8 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
const [uploadConfig, setUploadConfig] = useState<{enabled: boolean; error?: string}>(); const [uploadConfig, setUploadConfig] = useState<{enabled: boolean; error?: string}>();
const [isUploading, setUploading] = useState(false);
useEffect(() => { useEffect(() => {
if (limiter) { if (limiter) {
// Sending a bad string to make sure it fails (empty string isn't valid) // Sending a bad string to make sure it fails (empty string isn't valid)
@ -76,8 +78,11 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
let data: ThemesInstallResponseType | undefined; let data: ThemesInstallResponseType | undefined;
try { try {
setUploading(true);
data = await uploadTheme({file}); data = await uploadTheme({file});
setUploading(false);
} catch (e) { } catch (e) {
setUploading(false);
handleError(e); handleError(e);
} }
@ -170,7 +175,9 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
okRunningLabel: 'Overwriting...', okRunningLabel: 'Overwriting...',
okColor: 'red', okColor: 'red',
onOk: async (confirmModal) => { onOk: async (confirmModal) => {
setUploading(true);
await handleThemeUpload({file, onActivate: onClose}); await handleThemeUpload({file, onActivate: onClose});
setUploading(false);
setCurrentTab('installed'); setCurrentTab('installed');
confirmModal?.remove(); confirmModal?.remove();
} }
@ -180,7 +187,7 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
handleThemeUpload({file, onActivate: onClose}); handleThemeUpload({file, onActivate: onClose});
} }
}}> }}>
<Button color='black' label='Upload theme' tag='div' /> <Button color='black' label='Upload theme' loading={isUploading} tag='div' />
</FileUpload> : </FileUpload> :
<Button color='black' label='Upload theme' onClick={() => { <Button color='black' label='Upload theme' onClick={() => {
NiceModal.show(LimitModal, { NiceModal.show(LimitModal, {