Adds loading while fetching data

app/assets/stylesheets/pages/environments.scss

@@ -73,3 +73,8 @@
     }
   }
 }
+
+.environments-list-loading {
+  width: 100%;
+  font-size: 34px;
+}

app/views/projects/environments/index.html.haml

@@ -26,10 +26,10 @@
           New environment
 
   .environments-container#environments-list-view{ "v-cloak" => true, data: environments_list_data }
-    .environments-list-viewtext-center{ "v-if" => "loading" }
+    .environments-list-loading.text-center{ "v-if" => "loading" }
       = icon("spinner spin")
 
-    .blank-state.blank-state-no-icon{ "v-if" => "state.environments.length === 0" }
+    .blank-state.blank-state-no-icon{ "v-if" => "!loading && state.environments.length === 0" }
       %h2.blank-state-title
         You don't have any environments right now.
       %p.blank-state-text
@@ -41,7 +41,7 @@
         = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
           New environment
           
-    .table-holder{ "v-if" => "state.environments.length" }
+    .table-holder{ "v-if" => "!loading && state.environments.length" }
       %table.table.ci-table.environments
         %thead
           %th Environment