create loading and handle from js create edit and delete roles

resources/views/roles/create.blade.php

@@ -4,11 +4,12 @@
 
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Role'])
 
+<x-toast-notification />
 <div class="row d-flex justify-content-center">
     <div class="col-md-6">
         <div class="card">
             <div class="card-body">
-                <form action="{{route("roles.store")}}" method="post">
+                <form action="{{route("roles.store")}}" method="post" id="formCreateRole" data-redirect="{{route("roles.index")}}">
                     @csrf
                     <div class="mb-3">
                         <label class="form-label" for="name">Name</label>
@@ -20,7 +21,10 @@
                         <input type="text" id="description" name="description"
                                 class="form-control" placeholder="Enter description">
                     </div>
-                    <button type="submit" class="btn btn-success">Create</button>
+                    <button class="btn btn-primary me-1" type="button" id="btnCreateRole">
+                        <span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
+                        Create
+                    </button>
                 </form>
             </div>
         </div>
@@ -28,3 +32,7 @@
 </div>
 
 @endsection
+
+@section('scripts')
+@vite(['resources/js/roles/create.js'])
+@endsection