fix: keep save button spinner inline (#22227)

This commit is contained in:
Shirasawa
2026-03-04 13:56:49 -06:00
committed by GitHub
parent 5af24b3ebe
commit 7d45459a47
12 changed files with 36 additions and 36 deletions
+3 -3
View File
@@ -699,7 +699,7 @@
{/if} {/if}
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -708,9 +708,9 @@
{$i18n.t('Save')} {$i18n.t('Save')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
+3 -3
View File
@@ -898,7 +898,7 @@
{/if} {/if}
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -907,9 +907,9 @@
{$i18n.t('Save')} {$i18n.t('Save')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
+3 -3
View File
@@ -104,7 +104,7 @@
<div class="flex justify-end pt-3 text-sm font-medium"> <div class="flex justify-end pt-3 text-sm font-medium">
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -113,9 +113,9 @@
{$i18n.t('Import')} {$i18n.t('Import')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
@@ -1270,7 +1270,7 @@
<div class="flex justify-end pt-3 text-sm font-medium"> <div class="flex justify-end pt-3 text-sm font-medium">
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -1279,9 +1279,9 @@
{$i18n.t('Save')} {$i18n.t('Save')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
@@ -436,7 +436,7 @@
</Tooltip> </Tooltip>
</div> </div>
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -445,9 +445,9 @@
{$i18n.t('Save')} {$i18n.t('Save')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
@@ -219,7 +219,7 @@
{#if ['general', 'permissions'].includes(selectedTab)} {#if ['general', 'permissions'].includes(selectedTab)}
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5"> <div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -228,9 +228,9 @@
{$i18n.t('Save')} {$i18n.t('Save')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
@@ -285,7 +285,7 @@
<div class="flex justify-end pt-3 text-sm font-medium"> <div class="flex justify-end pt-3 text-sm font-medium">
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -294,9 +294,9 @@
{$i18n.t('Save')} {$i18n.t('Save')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
@@ -160,7 +160,7 @@
<div class="flex justify-end text-sm font-medium gap-1.5"> <div class="flex justify-end text-sm font-medium gap-1.5">
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {isSaving class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {isSaving
? 'cursor-not-allowed' ? 'cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -168,9 +168,9 @@
> >
{$i18n.t('Save')} {$i18n.t('Save')}
{#if isSaving} {#if isSaving}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
@@ -76,7 +76,7 @@
<div class="flex justify-end pt-1 text-sm font-medium"> <div class="flex justify-end pt-1 text-sm font-medium">
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -85,9 +85,9 @@
{$i18n.t('Add')} {$i18n.t('Add')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
@@ -86,7 +86,7 @@
<div class="flex justify-end pt-1 text-sm font-medium"> <div class="flex justify-end pt-1 text-sm font-medium">
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full {loading class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -95,9 +95,9 @@
{$i18n.t('Update')} {$i18n.t('Update')}
{#if loading} {#if loading}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>
@@ -252,15 +252,15 @@
<div class="pb-3 flex justify-end"> <div class="pb-3 flex justify-end">
{#if !disabled} {#if !disabled}
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center" class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap"
type="submit" type="submit"
disabled={loading} disabled={loading}
> >
{$i18n.t(edit ? 'Save' : 'Save & Create')} {$i18n.t(edit ? 'Save' : 'Save & Create')}
{#if loading} {#if loading}
<div class="ml-1.5"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
{/if} {/if}
@@ -184,7 +184,7 @@
<div class="flex justify-end pt-3 text-sm font-medium"> <div class="flex justify-end pt-3 text-sm font-medium">
<button <button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full {saving class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {saving
? ' cursor-not-allowed' ? ' cursor-not-allowed'
: ''}" : ''}"
type="submit" type="submit"
@@ -193,9 +193,9 @@
{$i18n.t('Save')} {$i18n.t('Save')}
{#if saving} {#if saving}
<div class="ml-2 self-center"> <span class="shrink-0">
<Spinner /> <Spinner />
</div> </span>
{/if} {/if}
</button> </button>
</div> </div>