Show loading spinner on Registration form submit button on clik

Author: thecodeholic

vue/src/views/Register.vue

@@ -46,17 +46,42 @@
 
  <div>
  <button type="submit"
- class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+ :disabled="loading"
+ class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+ :class="{'cursor-not-allowed': loading, 'hover:bg-indigo-500': loading}"
+ >
  <span class="absolute left-0 inset-y-0 flex items-center pl-3">
  <LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true"/>
  </span>
+ <svg
+ v-if="loading"
+ class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ >
+ <circle
+ class="opacity-25"
+ cx="12"
+ cy="12"
+ r="10"
+ stroke="currentColor"
+ stroke-width="4"
+ ></circle>
+ <path
+ class="opacity-75"
+ fill="currentColor"
+ d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+ ></path>
+ </svg>
  Sign up
  </button>
  </div>
  </form>
 </template>
 
 <script setup>
+import {ref} from 'vue'
 import {LockClosedIcon} from '@heroicons/vue/solid'
 import store from "../store";
 import {useRouter} from "vue-router";
@@ -67,16 +92,22 @@ const user = {
  email: '',
  password: ''
 };
+const loading = ref(false);
 
 function register(ev) {
  ev.preventDefault();
+ loading.value = true
  store
  .dispatch('register', user)
  .then(() => {
+ loading.value = false
  router.push({
  name: 'Dashboard'
  })
  })
+ .catch(() =>{
+ loading.value = false;
+ })
 }
 
 </script>