diff --git a/app/assets/javascripts/assets.js b/app/assets/javascripts/assets.js
index 95fc8362d..412cf7f60 100644
--- a/app/assets/javascripts/assets.js
+++ b/app/assets/javascripts/assets.js
@@ -1,6 +1,10 @@
+/* global animateSpinner FilePreviewModal */
+
 function setupAssetsLoading() {
   var DELAY = 2500;
   var REPETITIONS = 60;
+  var cntr = 0;
+  var intervalId;
 
   function refreshAssets() {
     var elements = $("[data-status='asset-loading']");
@@ -15,50 +19,55 @@ function setupAssetsLoading() {
       // Perform an AJAX call to present URL
       // to check if file already exists
       $.ajax({
-        url: $el.data("present-url"),
-        type: "GET",
-        dataType: "json",
-        success: function (data) {
-          var wopiBtns;
-          $el.attr("data-status", "asset-loaded");
+        url: $el.data('present-url'),
+        type: 'GET',
+        dataType: 'json',
+        success: function(data) {
+          if (data.processing === true) {
+            return;
+          }
+
+          if (data.processing === false) {
+            $el.html(data.placeholder_html);
+            $el.attr('data-status', 'asset-loaded');
+            return;
+          }
+
+          $el.attr('data-status', 'asset-loaded');
           $el.find('img').hide();
           $el.next().hide();
-          $el.html("");
+          $el.html('');
 
           if (data.type === 'image') {
             $el.html(
-              "<a class='file-preview-link' id='modal_link" +
-              data['asset-id'] + "' data-status='asset-present' " +
-              "href='" + data['download-url'] + "' data-preview-url='" +
-              data['preview-url'] + "'>" +
-              "<img src='" + data['image-tag-url'] + "'><p>" +
-              data.filename + '</p></a>'
+              "<a class='file-preview-link' id='modal_link"
+              + data['asset-id'] + "' data-status='asset-present' "
+              + "href='" + data['download-url'] + "' data-preview-url='" + data['preview-url'] + "'>"
+              + "<img src='" + data['image-tag-url'] + "'><p>" + data.filename + '</p></a>'
             );
           } else {
             $el.html(
-              "<a class='file-preview-link' id='modal_link" +
-              data['asset-id'] + "' data-status='asset-present' " +
-              "href='" + data['download-url'] + "' data-preview-url='" +
-              data['preview-url'] + "'><p>" +
-              data.filename + '</p></a>'
+              "<a class='file-preview-link' id='modal_link"
+              + data['asset-id'] + "' data-status='asset-present' "
+              + "href='" + data['download-url'] + "' data-preview-url='"
+              + data['preview-url'] + "'><p>" + data.filename + '</p></a>'
             );
           }
           animateSpinner(null, false);
           FilePreviewModal.init();
         },
         error: function(data) {
-          if (data.status == 403) {
+          if (data.status === 403) {
             $el.find('img').hide();
             $el.next().hide();
             // Image/file exists, but user doesn't have
             // rights to download it
-            if (type === "image") {
+            if (data.type === 'image') {
               $el.html(
-                "<img src='" + data['image-tag-url'] + "'><p>" +
-                data.filename + "</p>"
+                "<img src='" + data['image-tag-url'] + "'><p>" + data.filename + '</p>'
               );
             } else {
-              $el.html("<p>" + data.filename + "</p>");
+              $el.html('<p>' + data.filename + '</p>');
             }
           } else {
             // Do nothing, file is not yet present
@@ -76,14 +85,15 @@ function setupAssetsLoading() {
 
     $.each(elements, function(_, el) {
       var $el = $(el);
-      $el.attr("data-status", "asset-failed");
-      $el.html($el.data("filename"));
+      $el.attr('data-status', 'asset-failed');
+      if ($el.data('filename')) {
+        $el.html($el.data('filename'));
+      }
     });
   }
 
-  var cntr = 0;
-  var intervalId = window.setInterval(function() {
-    cntr++;
+  intervalId = window.setInterval(function() {
+    cntr += 1;
     if (cntr >= REPETITIONS || !refreshAssets()) {
       finalizeAssets();
       window.clearInterval(intervalId);
diff --git a/app/assets/javascripts/my_modules/protocols.js.erb b/app/assets/javascripts/my_modules/protocols.js.erb
index c5c5db6ba..cf01d5b39 100644
--- a/app/assets/javascripts/my_modules/protocols.js.erb
+++ b/app/assets/javascripts/my_modules/protocols.js.erb
@@ -17,7 +17,6 @@ function init() {
   initLoadFromRepository();
   initRefreshStatusBar();
   initImport();
-  setupAssetsLoading();
 }
 
 function initEditMyModuleDescription() {
diff --git a/app/assets/javascripts/sitewide/drag_n_drop.js.erb b/app/assets/javascripts/sitewide/drag_n_drop.js.erb
index 7ff762b76..d355de87a 100644
--- a/app/assets/javascripts/sitewide/drag_n_drop.js.erb
+++ b/app/assets/javascripts/sitewide/drag_n_drop.js.erb
@@ -190,7 +190,7 @@
       $('.attachment-placeholder.new').remove();
       _dragNdropAssetsOff();
       for(var i = 0; i < droppedFiles.length; i++) {
-        $('.attacments.edit')
+        $('.attachments.edit')
           .append(_uploadedAssetPreview(droppedFiles[i], i))
           .promise()
           .done(function() {
diff --git a/app/assets/javascripts/sitewide/file_preview.js b/app/assets/javascripts/sitewide/file_preview.js
index bf371f7cd..908a5c64a 100644
--- a/app/assets/javascripts/sitewide/file_preview.js
+++ b/app/assets/javascripts/sitewide/file_preview.js
@@ -431,7 +431,7 @@ var FilePreviewModal = (function() {
         link.attr('data-status', 'asset-present');
         if (data.type === 'image') {
           if (data.processing) {
-            animateSpinner('.file-preview-container', true);
+            modal.find('.file-preview-container').append(data['processing-img']);
           } else {
             animateSpinner('.file-preview-container', false);
             modal.find('.file-preview-container')
diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss
index bb3d3544a..1ea72b6fa 100644
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@@ -113,7 +113,7 @@
   }
 }
 
-.attacments {
+.attachments {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb
index cd2501499..4eedf319e 100644
--- a/app/controllers/assets_controller.rb
+++ b/app/controllers/assets_controller.rb
@@ -42,6 +42,24 @@ class AssetsController < ApplicationController
     end
   end
 
+  def step_file_present
+    respond_to do |format|
+      format.json do
+        if @asset.file.processing?
+          render json: { processing: true }
+        else
+          render json: {
+            placeholder_html: render_to_string(
+              partial: 'steps/attachments/placeholder.html.erb',
+              locals: { asset: @asset, edit_page: false }
+            ),
+            processing: false
+          }
+        end
+      end
+    end
+  end
+
   def file_preview
     response_json = {
       'id' => @asset.id,
@@ -69,7 +87,7 @@ class AssetsController < ApplicationController
         'mime-type' => @asset.file.content_type,
         'processing' => @asset.file.processing?,
         'large-preview-url' => @asset.url(:large),
-        'processing-url' => image_tag('medium/processing.gif')
+        'processing-img' => image_tag('medium/processing.gif')
       )
     else
       response_json.merge!(
@@ -251,12 +269,9 @@ class AssetsController < ApplicationController
     @asset = Asset.find_by_id(params[:id])
     return render_404 unless @asset
 
-    step_assoc = @asset.step
-    result_assoc = @asset.result
-    repository_cell_assoc = @asset.repository_cell
-    @assoc = step_assoc unless step_assoc.nil?
-    @assoc = result_assoc unless result_assoc.nil?
-    @assoc = repository_cell_assoc unless repository_cell_assoc.nil?
+    @assoc ||= @asset.step
+    @assoc ||= @asset.result
+    @assoc ||= @asset.repository_cell
 
     if @assoc.class == Step
       @protocol = @asset.step.protocol
diff --git a/app/views/steps/_empty_step.html.erb b/app/views/steps/_empty_step.html.erb
index 61c6eedde..d68b3edeb 100644
--- a/app/views/steps/_empty_step.html.erb
+++ b/app/views/steps/_empty_step.html.erb
@@ -67,7 +67,7 @@
       </span>
     </div>
     <div id="new-step-assets-group" class="form-group">
-      <div class="col-xs-12 attacments edit">
+      <div class="col-xs-12 attachments edit">
         <%= f.nested_fields_for :assets do |ff| %>
           <%= render partial: 'steps/attachments/placeholder.html.erb',
                      locals: { edit_page: true, asset: ff.object, ff: ff } %>
diff --git a/app/views/steps/attachments/_item.html.erb b/app/views/steps/attachments/_item.html.erb
index b4190dfcf..fe01bf3c3 100644
--- a/app/views/steps/attachments/_item.html.erb
+++ b/app/views/steps/attachments/_item.html.erb
@@ -1,8 +1,19 @@
+<% if asset.file.processing? && asset.is_image? %>
+  <% asset_status = 'asset-loading' %>
+  <% present_url = step_file_present_asset_path(asset.id) %>
+<% else %>
+  <% asset_status = 'asset-present' %>
+  <% present_url = '' %>
+<% end %>
+
 <div class="pseudo-attachment-container" style="order: <%= assets_count - i %>">
     <%= link_to download_asset_path(asset),
             class: 'file-preview-link',
             id: "modal_link#{asset.id}",
-            data: { no_turbolink: true, id: true, status: 'asset-present',
+            data: { no_turbolink: true,
+                    id: true,
+                    status: asset_status,
+                    'present-url': present_url,
                     'preview-url': asset_file_preview_path(asset),
                     'order-atoz': az_ordered_assets_index(step, asset.id),
                     'order-ztoa': assets_count - az_ordered_assets_index(step, asset.id),
diff --git a/app/views/steps/attachments/_list.html.erb b/app/views/steps/attachments/_list.html.erb
index d7b2e7ce7..cc13bef61 100644
--- a/app/views/steps/attachments/_list.html.erb
+++ b/app/views/steps/attachments/_list.html.erb
@@ -33,7 +33,7 @@
   </div>
 </div>
 
-<div class="col-xs-12 attacments" id="att-<%= step.id %>">
+<div class="col-xs-12 attachments" id="att-<%= step.id %>">
   <% assets.each_with_index do |asset, i| %>
     <%= render partial: 'steps/attachments/item.html.erb',
                locals: { asset: asset, i: i, assets_count: assets.count, step: step } %>
diff --git a/config/routes.rb b/config/routes.rb
index 14c561332..523ab8e4a 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -340,10 +340,10 @@ Rails.application.routes.draw do
     # as well as 'module info' page for single module (HTML)
     resources :my_modules, path: '/modules', only: [:show, :update] do
       resources :my_module_tags, path: '/tags', only: [:index, :create, :destroy] do
-        collection do 
+        collection do
           get :search_tags
         end
-        member do 
+        member do
           post :destroy_by_tag_id
         end
       end
@@ -580,6 +580,7 @@ Rails.application.routes.draw do
     # We cannot use 'resources :assets' because assets is a reserved route
     # in Rails (assets pipeline) and causes funky behavior
     get 'files/:id/present', to: 'assets#file_present', as: 'file_present_asset'
+    get 'files/:id/present_in_step', to: 'assets#step_file_present', as: 'step_file_present_asset'
     get 'files/:id/preview',
         to: 'assets#file_preview',
         as: 'asset_file_preview'