Added loading icon to import buttons

See #14488 for more details

6 files changed, 72 insertions, 27 deletions

diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml
index aec2e836c9f..134d88481db 100644
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@@ -10,13 +10,19 @@
   %hr
   %p
   - if @incompatible_repos.any?
-    = button_tag 'Import all compatible projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-import btn-success js-import-all" do
+      = icon('spinner spin', class: 'loading-icon')
+      Import all compatible projects
   - else
-    = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-success js-import-all" do
+      = icon('spinner spin', class: 'loading-icon')
+      Import all projects
 
-
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From Bitbucket
@@ -28,7 +34,7 @@
           %td
             = link_to project.import_source, "https://bitbucket.org/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -47,7 +53,9 @@
           %td.import-target
             = "#{repo["owner"]}/#{repo["slug"]}"
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
       - @incompatible_repos.each do |repo|
         %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
           %td
diff --git a/app/views/import/fogbugz/status.html.haml b/app/views/import/fogbugz/status.html.haml
index 6ee16c8be4b..f5966fac65b 100644
--- a/app/views/import/fogbugz/status.html.haml
+++ b/app/views/import/fogbugz/status.html.haml
@@ -13,10 +13,15 @@
     how FogBugz email addresses and usernames are imported into GitLab.
   %hr
   %p
-  = button_tag 'Import all projects', class: 'btn btn-success js-import-all'
+  = button_tag class: 'btn btn-import btn-success js-import-all' do
+    = icon('spinner spin', class: 'loading-icon')
+    Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From FogBugz
@@ -28,7 +33,7 @@
           %td
             = project.import_source
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -47,7 +52,9 @@
           %td.import-target
             = "#{current_user.username}/#{repo.name}"
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
 
 :javascript
   new ImporterStatus("#{jobs_import_fogbugz_path}", "#{import_fogbugz_path}");
diff --git a/app/views/import/github/status.html.haml b/app/views/import/github/status.html.haml
index 1416ee5bd5a..65432951ec8 100644
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@@ -8,10 +8,15 @@
   Select projects you want to import.
 %hr
 %p
-  = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+  = button_tag class: "btn btn-import btn-success js-import-all" do
+    = icon('spinner spin', class: 'loading-icon')
+    Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From GitHub
@@ -23,7 +28,7 @@
           %td
             = link_to project.import_source, "https://github.com/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -42,7 +47,9 @@
           %td.import-target
             = repo.full_name
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
 
 :javascript
   new ImporterStatus("#{jobs_import_github_path}", "#{import_github_path}");
diff --git a/app/views/import/gitlab/status.html.haml b/app/views/import/gitlab/status.html.haml
index 911a55eb85d..f20011f5684 100644
--- a/app/views/import/gitlab/status.html.haml
+++ b/app/views/import/gitlab/status.html.haml
@@ -8,10 +8,15 @@
   Select projects you want to import.
 %hr
 %p
-  = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+  = button_tag class: "btn btn-import btn-success js-import-all" do
+    = icon('spinner spin', class: 'loading-icon')
+    Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From GitLab.com
@@ -23,7 +28,7 @@
           %td
             = link_to project.import_source, "https://gitlab.com/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -42,7 +47,9 @@
           %td.import-target
             = repo["path_with_namespace"]
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
 
 :javascript
   new ImporterStatus("#{jobs_import_gitlab_path}", "#{import_gitlab_path}");
diff --git a/app/views/import/gitorious/status.html.haml b/app/views/import/gitorious/status.html.haml
index 6b0fa1edf8c..725910ed213 100644
--- a/app/views/import/gitorious/status.html.haml
+++ b/app/views/import/gitorious/status.html.haml
@@ -8,10 +8,15 @@
   Select projects you want to import.
 %hr
 %p
-  = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+  = button_tag class: "btn btn-import btn-success js-import-all" do
+    = icon('spinner spin', class: 'loading-icon')
+    Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From Gitorious.org
@@ -23,7 +28,7 @@
           %td
             = link_to project.import_source, "https://gitorious.org/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -42,7 +47,9 @@
           %td.import-target
             = repo.full_name
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
 
 :javascript
   new ImporterStatus("#{jobs_import_gitorious_path}", "#{import_gitorious_path}");
diff --git a/app/views/import/google_code/status.html.haml b/app/views/import/google_code/status.html.haml
index 175ef6921cd..2cb0931838b 100644
--- a/app/views/import/google_code/status.html.haml
+++ b/app/views/import/google_code/status.html.haml
@@ -14,12 +14,19 @@
   %hr
   %p
   - if @incompatible_repos.any?
-    = button_tag 'Import all compatible projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-import btn-success js-import-all" do
+      = icon('spinner spin', class: 'loading-icon')
+      Import all compatible projects
   - else
-    = button_tag 'Import all projects', class: "btn btn-success js-import-all"
+    = button_tag class: "btn btn-import btn-success js-import-all" do
+      = icon('spinner spin', class: 'loading-icon')
+      Import all projects
 
-.table-holder
+.table-responsive
   %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
     %thead
       %tr
         %th From Google Code
@@ -31,7 +38,7 @@
           %td
             = link_to project.import_source, "https://code.google.com/p/#{project.import_source}", target: "_blank"
           %td
-            %strong= link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
             - if project.import_status == 'finished'
               %span
@@ -50,7 +57,9 @@
           %td.import-target
             = "#{current_user.username}/#{repo.name}"
           %td.import-actions.job-status
-            = button_tag "Import", class: "btn js-add-to-import"
+            = button_tag class: "btn btn-import js-add-to-import" do
+              = icon('spinner spin', class: 'loading-icon')
+              Import
       - @incompatible_repos.each do |repo|
         %tr{id: "repo_#{repo.id}"}
           %td