Button with "idle" and "saving" states

This commit is contained in:
Jose Olarte III
2023-02-14 15:14:45 +08:00
parent a4301694ad
commit 8d340739ae

View File

@@ -49,7 +49,13 @@
<div class="text-xs text-slate-500 italic -mt-3 mb-4">88/500 max. characters</div>
<div class="mt-8">
<input type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" value="Save Project" />
<button type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2">
<!-- SHOW if in idle state -->
<span class="hidden">Save Project</span>
<!-- SHOW if in saving state; DISABLE button while in saving state -->
<span class=""><i class="fa-solid fa-spinner fa-spin-pulse"></i> Saving&hellip;</span>
</button>
<button type="button" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Cancel</button>
</div>
</form>