uploads: change loading indicator for thumbnails.

Use a spinner icon instead of the word "Loading" for thumbnails that are
being processed in the background in a batch upload.

Also use morphdom to update thumbnails so we only update the parts of
the DOM that actually changed.

app/components/media_asset_preview_component/media_asset_preview_component.html.erb

@@ -30,7 +30,7 @@
     <% else %>
       <div class="media-asset-placeholder rounded border border-solid flex items-center justify-center w-<%= size %>px h-<%= size %>px">
         <% if media_asset.processing? %>
-          Loading
+          <%= spinner_icon(class: "animate-spin h-8") %>
         <% elsif media_asset.failed? %>
           Failed
         <% else %>

app/javascript/packs/application.js

@@ -9,6 +9,7 @@ import "core-js/web/dom-collections";
 require('@rails/ujs').start();
 require('hammerjs');
 require('jquery-hotkeys');
+import morphdom from 'morphdom';
 
 // should start looking for nodejs replacements
 importAll(require.context('../vendor', true, /\.js$/));
@@ -91,4 +92,5 @@ Danbooru.error = Utility.error;
 
 window.$ = jQuery;
 window.jQuery = jQuery;
+window.morphdom = morphdom;
 window.Danbooru = Danbooru;

app/views/upload_media_assets/_preview.html.erb

@@ -5,7 +5,7 @@
     <% if upload_media_asset.failed? %>
       Failed
     <% else %>
-      Loading
+      <%= spinner_icon(class: "animate-spin h-8") %>
     <% end %>
   <% end %>
 

app/views/upload_media_assets/index.js.erb

@@ -1,3 +1,7 @@
 <% @upload_media_assets.each do |upload_media_asset| %>
-  $(".upload-media-asset-preview[data-id=<%= upload_media_asset.id %>]").replaceWith("<%= j render("upload_media_assets/preview", upload_media_asset: upload_media_asset, size: params.fetch(:size, 180)) %>");
+  $(function() {
+    let $el = $(".upload-media-asset-preview[data-id=<%= upload_media_asset.id %>]").get(0);
+    let html = "<%= j render("upload_media_assets/preview", upload_media_asset: upload_media_asset, size: params.fetch(:size, 180)) %>";
+    morphdom($el, html);
+  });
 <% end %>