add loading text for form submit buttons

app/controllers/application_controller.rb

@@ -7,7 +7,8 @@ class ApplicationController < ActionController::Base
   before_action :authenticate_user!, unless: :devise_controller?
 
   helper_method :button_title,
-                :current_account
+                :current_account,
+                :svg_icon
 
   private
 
@@ -19,7 +20,11 @@ class ApplicationController < ActionController::Base
     redirect_to setup_index_path unless User.exists?
   end
 
-  def button_title(title = 'Submit', disabled_with = 'Submitting...')
-    render_to_string(partial: 'shared/button_title', locals: { title:, disabled_with: })
+  def button_title(title: 'Submit', disabled_with: 'Submitting', icon: nil)
+    render_to_string(partial: 'shared/button_title', locals: { title:, disabled_with:, icon: })
+  end
+
+  def svg_icon(icon_name, options = {})
+    render_to_string(partial: "icons/#{icon_name}", locals: { attibutes: options })
   end
 end

app/views/devise/passwords/edit.html.erb

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="form-control">
-      <%= f.submit 'Change my password', class: 'base-button' %>
+      <%= f.button button_title(title: 'Change my password', disabled_with: 'Changing password'), class: 'base-button' %>
     </div>
     <%= render 'devise/shared/links' %>
   <% end %>

app/views/devise/passwords/new.html.erb

@@ -9,7 +9,7 @@
       </div>
     </div>
     <div class="form-control">
-      <%= f.submit 'Reset password', class: 'base-button' %>
+      <%= f.button button_title(title: 'Reset password', disabled_with: 'Resetting password'), class: 'base-button' %>
     </div>
   <% end %>
   <%= render 'devise/shared/links' %>

app/views/devise/registrations/new.html.erb

@@ -31,7 +31,7 @@
       <% end %>
     </div>
     <div class="form-control">
-      <%= f.submit 'Sign up', class: 'base-button' %>
+      <%= f.button button_title(title: 'Sign up', disabled_with: 'Signing up'), class: 'base-button' %>
     </div>
   <% end %>
   <%= render 'devise/shared/links' %>

app/views/devise/sessions/new.html.erb

@@ -20,7 +20,7 @@
       <% end %>
     </div>
     <div class="form-control">
-      <%= f.submit 'Log in', class: 'base-button' %>
+      <%= f.button button_title(title: 'Log In', disabled_with: 'Logging In'), class: 'base-button' %>
     </div>
   <% end %>
   <%= render 'devise/shared/links' %>

app/views/email_settings/index.html.erb

@@ -34,7 +34,7 @@
         </div>
       <% end %>
       <div class="form-control">
-        <%= f.button button_title, class: 'base-button' %>
+        <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button' %>
       </div>
     <% end %>
   </div>

app/views/esign_settings/index.html.erb

@@ -13,7 +13,7 @@
           Cick to upload
         </label>
       </file-dropzone>
-      <%= f.button button_title %>
+      <%= f.button button_title(title: 'Save', disabled_with: 'Saving') %>
     <% end %>
   </div>
   <div class="w-0 md:w-52"></div>

app/views/icons/_loader.html.erb

@@ -0,0 +1,4 @@
+<svg <%= html_attributes(**local_assigns.fetch(:attibutes, {})) %> xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M12 3a9 9 0 1 0 9 9" />
+</svg>

app/views/icons/_save.html.erb

@@ -0,0 +1,6 @@
+<svg <%= html_attributes(**local_assigns.fetch(:attibutes, {})) %> xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
+  <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+  <path d="M14 4l0 4l-6 0l0 -4" />
+</svg>

app/views/invitations/edit.html.erb

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="form-control">
-      <%= f.submit 'Save password and Sign in', class: 'base-button' %>
+      <%= f.button button_title(title: 'Save password and Sign in', disabled_with: 'Saving'), class: 'base-button' %>
     </div>
   <% end %>
 </div>

app/views/profile/index.html.erb

@@ -27,7 +27,7 @@
         </div>
       <% end %>
       <div class="form-control">
-        <%= f.button button_title, class: 'base-button' %>
+        <%= f.button button_title(title: 'Update', disabled_with: 'Updating'), class: 'base-button' %>
       </div>
     <% end %>
     <h2 class="text-2xl font-bold mt-8 mb-4">Change Password</h2>
@@ -41,7 +41,7 @@
         <%= f.password_field :password_confirmation, autocomplete: 'off', class: 'base-input' %>
       </div>
       <div class="form-control">
-        <%= f.button button_title, class: 'base-button' %>
+        <%= f.button button_title(title: 'Update', disabled_with: 'Updating'), class: 'base-button' %>
       </div>
     <% end %>
   </div>

app/views/setup/index.html.erb

@@ -32,7 +32,7 @@
       <% end %>
     </div>
     <div class="form-control">
-      <%= f.button button_title, class: 'base-button' %>
+      <%= f.button button_title(title: 'Confirm', disabled_with: 'Processing'), class: 'base-button' %>
     </div>
   <% end %>
 </div>

app/views/shared/_button_title.html.erb

@@ -1,6 +1,12 @@
 <span class="enabled">
-  <%= title %>
+  <span class="flex justify-center space-x-3">
+    <%= icon if icon %>
+    <span><%= title %></span>
+  </span>
 </span>
 <span class="disabled">
-  <%= disabled_with %>
+  <span class="flex justify-center space-x-3">
+    <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
+    <span><%= disabled_with %>...</span>
+  </span>
 </span>

app/views/start_form/completed.html.erb

@@ -1,5 +1,5 @@
 <p>
   Form has been submitted alredy by ypu - thanks!
 </p>
-<%= button_to button_title('Send copy to Email'), send_submission_email_index_path, params: { template_slug: @template.slug, email: params[:email] }, form: { onsubmit: 'event.submitter.disabled = true' } %>
+<%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending'), send_submission_email_index_path, params: { template_slug: @template.slug, email: params[:email] }, form: { onsubmit: 'event.submitter.disabled = true' } %>
 <%# do not allow donwload for securetiy reaosn<a href="">Download documets</a> %>

app/views/start_form/show.html.erb

@@ -5,5 +5,5 @@ You have been invited to submit template <%= @template.name %>
     <%= f.label :email %>
     <%= f.email_field :email, required: true %>
   </div>
-  <%= f.button button_title %>
+  <%= f.button button_title(title: 'Confirm', disabled_with: 'Processing') %>
 <% end %>

app/views/storage_settings/index.html.erb

@@ -34,7 +34,7 @@
         <%= render "azure_form", f: f, configs: configs, value: value %>
       </disable-hidden>
       <div class="form-control">
-        <%= f.button button_title('OK'), class: 'base-button' %>
+        <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button' %>
       </div>
     <% end %>
   </div>

app/views/submissions/new.html.erb

@@ -28,7 +28,7 @@
     </div>
   </div>
   <div class="form-control">
-    <%= f.button button_title, class: 'base-button' %>
+    <%= f.button button_title(title: 'Confirm', disabled_with: 'Processing'), class: 'base-button' %>
   </div>
 <% end %>
 <% end %>

app/views/submit_form/completed.html.erb

@@ -1,5 +1,5 @@
 <p>
   Form completed - thanks!
 </p>
-<%= button_to button_title('Send copy to Email'), send_submission_email_index_path, params: { submission_slug: @submission.slug }, form: { onsubmit: 'event.submitter.disabled = true' } %>
-<%= button_to button_title('Download documents'), submission_download_index_path(@submission.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' } %>
+<%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending'), send_submission_email_index_path, params: { submission_slug: @submission.slug }, form: { onsubmit: 'event.submitter.disabled = true' } %>
+<%= button_to button_title(title: 'Download documents', disabled_with: 'Downloading'), submission_download_index_path(@submission.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' } %>

app/views/templates/new.html.erb

@@ -4,7 +4,7 @@
       <%= f.text_field :name, required: true, placeholder: 'Template Name', class: 'base-input' %>
     </div>
     <div class="form-control mt-4">
-      <%= f.button button_title('Create'), class: 'base-button' %>
+      <%= f.button button_title(title: 'Create', disabled_with: 'Creating'), class: 'base-button' %>
     </div>
   <% end %>
 <% end %>

app/views/users/_form.html.erb

@@ -18,6 +18,6 @@
     </div>
   </div>
   <div class="form-control">
-    <%= f.button button_title, class: 'base-button' %>
+    <%= f.button button_title(title: 'Confirm', disabled_with: 'Processing'), class: 'base-button' %>
   </div>
 <% end %>