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 %>

package.json

@@ -23,6 +23,7 @@
     "jquery-ui": "^1.13.0",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.5.1",
+    "morphdom": "^2.6.1",
     "postcss": "^8.4.5",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",

yarn.lock

@@ -5587,6 +5587,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"morphdom@npm:^2.6.1":
+  version: 2.6.1
+  resolution: "morphdom@npm:2.6.1"
+  checksum: 91642cf02eca6024bc689c9ec942fc7beade02602292e7bbb47538de9c51253482b323c213237017ddebe8c15a2011c93d22ab21a7809d739f06531acd6cca2b
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -7105,6 +7112,7 @@ fsevents@~2.3.2:
     jquery-ui: ^1.13.0
     lodash: ^4.17.21
     mini-css-extract-plugin: ^2.5.1
+    morphdom: ^2.6.1
     postcss: ^8.4.5
     postcss-import: ^14.0.2
     postcss-loader: ^6.2.1