jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

uploads: change loading indicator for thumbnails.

Browse Source 
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.
This commit is contained in:
evazion
2022-02-18 15:59:33 -06:00
parent a1d2572bad
commit e37dd3a6d0
6 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/media_asset_preview_component/media_asset_preview_component.html.erb
View File

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

2
app/javascript/packs/application.js
View File

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

2
app/views/upload_media_assets/_preview.html.erb
View File

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

6
app/views/upload_media_assets/index.js.erb
View File

@@ -1,3 +1,7 @@
<% @upload_media_assets.each do |upload_media_asset| %> <% @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 %> <% end %>

1
package.json
View File

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

8
yarn.lock
View File

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