[5.3] Replace dialog GIF loader with Custom Element

[C-Lodder]

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!

1. Go to edit any article.
2. Click "Versions" in the toolbar.
3. 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

[dgrammatiko]

You could also use import maps here but this is also fine for me

[Fedik]

It was made with pure CSS with purpose to allow custom loaders.
Your approach adding a hard dependency. I do not like it, sorry.

[C-Lodder]

@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.

[fgsw]

I have tested this item ✅ successfully on 47d29db

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44232.}

[richard67]

@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.

[Fedik]

@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 😃

Need to find a better solution.
Until then, can just remove the loader CSS, no one will ever notice 😃
Or just make 2 rotating dots with :before, :after animation (there many examples at loading.io/css/, cssload.net etc).

[laoneo]

Can you rebase this one to the 5.3-dev branch?

[C-Lodder]

@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.

[Fedik]

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; 😉

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.