joomla
[5.3] Replace dialog GIF loader with Custom Element
Summary of Changes
This PR replaces the GIF loading icon used within dialogs, with the Custom Element.
Testing Instructions
Note: This cannot be tested with Patch Tester!
- Go to edit any article.
- Click "Versions" in the toolbar.
- Before the list of versions are loaded, you should see a loading icon for a split second.
Actual result BEFORE applying this Pull Request
Expected result AFTER applying this Pull Request
cc'ing @Fedik @dgrammatiko
It was made with pure CSS with purpose to allow custom loaders. Your approach adding a hard dependency. I do not like it, sorry.
@Fedik I changed the Custom Element to use SVG over CSS, cause resizing the CSS one was an absolute nightmare. Using custom loaders is still possible by overriding the JS file...isn't it?
Either way, this simply implements the loader that's used everywhere else in Joomla, rather than using the outdated GIF, that doesn't look great in dark mode.
I have tested this item :white_check_mark: successfully on 47d29db191614aa680cda437338cb76a3daba7a8
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44232.
@C-Lodder Could you check the two linter errors reported here? https://ci.joomla.org/joomla/joomla-cms/79575/1/20
/drone/src/build/media_source/system/js/joomla-dialog.w-c.es6.js
319:3 error Expected 'this' to be used by class method 'renderLoader' class-methods-use-this
325:1 error Trailing spaces not allowed no-trailing-spaces
Thanks in advance.
@C-Lodder I agree that the gif on black backround looks ugly, However, the loader hardcoded in to dialog I do not like even more :smiley:
Need to find a better solution.
Until then, can just remove the loader CSS, no one will ever notice :smiley:
Or just make 2 rotating dots with :before, :after animation (there many examples at loading.io/css/, cssload.net etc).
@laoneo done.
@Fedik Whether the loader is instantiated via CSS class or Javascript, both are couple to something. With CSS, it's coupled to the template. With JS, it coupled to the dialog web component. Both can be overridden.
I can't use the old Joomla CSS loader because it wasn't easily possible to change the size without destroying the layout.
It's also unecessarily coupled to core, so I can't see how a loading icon makes much difference.
Either way, happy to close if anyone would like to provide an alternative, or keep the current icon.
core is a different story (it requires only because of Text and HTML sanitisation), but I also was not very happy about that.
it wasn't easily possible to change the size without destroying the layout
I have a hint: width: 30px; height: 30px; background-position:center; :wink:
Either way, happy to close if anyone would like to provide an alternative, or keep the current icon.
Hold on for now, I will look what else can be, when will get some time.
