Hide progress bar for remove white space on init form. Added display block via js to show progrss bar. Added some margin.

app/assets/javascripts/documentable.js.coffee

@@ -18,6 +18,7 @@ App.Documentable =
         is_nested_document = $(e.target).data('nested-document')
         $(wrapper).find('.progress-bar-placeholder').empty()
         data.progressBar = $(wrapper).find('.progress-bar-placeholder').html('<div class="progress-bar"><div class="loading-bar uploading"></div></div>')
+        $(wrapper).find('.progress-bar-placeholder').css('display','block')
         data.formData = {
           "document[title]": $(wrapper).find('input.document-title').val() || data.files[0].name
           "index": index,
@@ -66,6 +67,7 @@ App.Documentable =
       $('#' + id).find('.loading-bar').addClass 'complete'
     else
       $('#' + id).find('.loading-bar').addClass 'errors'
+    $('#' + id).find('.progress-bar-placeholder').css('display','block')
 
   new: (nested_fields) ->
     $(".documents-list").append(nested_fields)

app/assets/stylesheets/documentable.scss

@@ -1,3 +1,19 @@
+.progress-bar-placeholder {
+  display: none;
+}
+
+.document-form {
+  .document .file-name {
+    margin-top: 0;
+  }
+  .progress-bar-placeholder {
+    margin-bottom: 15px;
+  }
+  .document .loading-bar.errors {
+    margin-top: $line-height * 2;
+  }
+}
+
 .document {
   .button {
     font-weight: normal;
@@ -28,12 +44,12 @@
     &.complete {
       background-color: $success-color;
       width: 100%;
-      margin-top: $line-height * 2;
     }
 
     &.errors {
       background-color: $alert-color;
       width: 100%;
+      margin-top: $line-height / 2;
     }
   }
 

app/views/documents/_nested_fields.html.erb

@@ -25,9 +25,7 @@
   <%= render_attachment(document, index) %>
 
   <%= render_destroy_document_link(document, index) %>
-
-  <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
   <p class="file-name"><%= document_attachment_file_name(document) %></p>
-
+  <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
   <hr>
 </div>

app/views/documents/_plain_fields.html.erb

@@ -43,8 +43,8 @@
         </div>
       </div>
     <% end %>
-    <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
     <p class="file-name"><%= document_attachment_file_name(document) %></p>
+    <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
   </div>
 
-</div>
+</div>