What about simplifying it with a simple rotating circle? The text to me looks a bit crud..

Maybe we can use: https://github.com/joomla/joomla-cms/blob/staging/media/jui/img/ajax-loader.gif ?

@ggppdk there is a function for that: https://github.com/joomla/joomla-cms/blob/staging/media/system/js/core-uncompressed.js#L692

Animated image in most browsers

• will freeze during / after form submision

so displaying a frozen image is not much of an option

A CSS3 solution animation (circle or similar) works,
... but it will not work in IE8-IE9 (... for IE9 i will need to check)

You will even need to set a small timeout for form submission to be delayed a little
so that DOM will be updated and show the image and then it will be shown frozen or mostly frozen

@ggppdk my point was that we already have some code for this, maybe enhance it to render test for css spinner...

my point was that we already have some code for this, maybe enhance it to render text for css spinner...

yes, thanks, i was asking if this or similar existed,

just as said above, animated images in IE8-IE10 and even IE11 ? will not be animated well, during: form submit / page reload

and will need a good delay before we do the form submit, so that DOM is updated to even show them

[EDIT]
partly the problem is image loading, if we add the animated image on page load and just toggle their display, then image will show without need to add delay to form submit, but still it will not animate well

So, i think currently proposed solution offers best browser compatibility

For me the styling and also the old javascript code are added on the wrong place. But unfortunately I don't have a better way to suggest. Any ideas?

@dgt41 , @laoneo

I checked CSS3 animations, when navigating to other URLs (or reloading current URL)
do not work at all with IE8 / IE9

About Joomla.loadingLayer()
yes i was asking if there is an already usuable overlay-loading JS method

• and i see it already has an option to preload the animation image (and hide it) into the DOM doing:
  Joomla.loadingLayer('load');

But there are 2 other issues with Joomla.loadingLayer()

Problem 1:
The image itself is not suitable because it is Joomla LOGO
(it was meant for Joomla Installation / Update tasks) so it does not look appropriate for showing such an image (Joomla LOGO) to users editing content, especially in frontend

Solution: I think either replace with a neutral one, like a spining circle or add option to the loadingLayer() method to use either Joomla logo or a neutral one

Problem 2:
Image animation only shows if doing AJAX tasks

• usually image animation not done / not showing well, when navigating to other URL (or reloading current)

To summarize, proposed solution by this PR is best

@dgt41 ... can we add the case proposed by this PR to Joomla.loadingLayer ?
introducing a "type" parameter to the method ?

type: 0, overlay + Joomla logo animation
type: 1, overlay + Neutral image animation
type: 2, overlay + Static text loading message

type 0 and 1 good for AJAX requests
type 2 good for navigating to other URL / or reopening current URL

@ggppdk adding one more flag to that function should be ok (if there is a fallback for the case that this flag is not set, to current behaviour).

I will suggest to pass the image link through addScriptOptions, so no inline script needs to be introduced. e.g.
JFactory::getDocument()->addScriptOption('loadingLayer', 'path/to/image.gif');

The image itself is not suitable because it is Joomla LOGO
(it was meant for Joomla Installation / Update tasks) so it does not look appropriate for showing such an image (Joomla LOGO) to users editing content, especially in frontend

That's not true. It's meant as a "loading" spinner that can be used in any case where we have a delay. It's perfectly fine to be used in 3rd party extensions.

Image animation only shows if doing AJAX tasks
usually image animation not done / not showing well, when navigating to other URL (or reloading current)

In the language installer we use the regular loading spinner just fine (https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_installer/views/languages/tmpl/default.php#L19-L30). I think it's a similar case as here as the form is submitted and reloaded.

If the spinner isn't animated in some older browsers, then so be it. It's not that important that it is animated. Your message box wouldn't be animated as well :)

So please don't invent other ways to do the same thing. Just use the one already present. Don't make things complicater than needed ?

In the language installer we use the regular loading spinner just fine

Yes, agreed, that the image solution is good , and in the above case it is always shown properly,
because it is preloaded (as i mentioned above, in case it is preloaded with: Joomla.loadingLayer('load'); it always shown)

-- and then image animation depends on the browser and its current load too
i do not disagree with this solution, it is good

but the image itself is a problem, (please read below)

That's not true. It's meant as a "loading" spinner that can be used in any case where we have a delay. It's perfectly fine to be used in 3rd party extensions.

hhmm, i meant it like this:

e.g. i have a website made by Joomla and i have frontend editors
... and i do not want to show JOOMLA! LOGO as loading animation to them
when they edit an article in frontend and they change the category

= which is advertising to frontend users that website is using Joomla

do you see the problem ? or maybe the above is ok, i do not mind it personally

@Bakual , @dgt41

I have made usage of

Joomla.loadingLayer('load');
Joomla.loadingLayer('show');

replacing the fixed message and the inline styles,
it should work well now,
later if someone adds a different image file as animation,
then at the same PR he / she should update this code to use that new image ...

I don't see it as an issue if a frontend editor gets to see the logo of the CMS they use for free. If they even recognize the logo ?

The page got also reloaded when you create a new field and do change the type. Can we add that functionality there as well? Code is here https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_fields/models/fields/type.php#L149

Why are we reloading the whole page btw? Would it not make sense to make a Json call or use the Ajax component and just fetch the relevant data and insert it in the current view? a whole page reload seems a bit slow an excessive to me.

@tonypartridge Because basically more or less the whol form may change and need preprocessing on server side. While it could be done using AJAX, it's just way easier doing it this way as we can use the existing API.

Why are we reloading the whole page btw? Would it not make sense to make a Json call or use the Ajax component and just fetch the relevant data and insert it in the current view? a whole page reload seems a bit slow an excessive to me.

Because basically more or less the whol form may change and need preprocessing on server side

I think currently the above is not happening / not needed

The biggest problem is that adding the fields HTML is not enough,
problems:

1. any inline JS code will not be execute
2. any header added JS and JS files will not be retrieved
3. any header added CSS and CSS files will not retrieved

Only inline style blocks are ok

All fields would need to converted to provide an AJAX safe display() method ...
-- providing a JSON response with:

1. their HTML
2. their otherwise header-added JS
3. their otherwise header-added CSS

and then their JS will need to be appropriate so that it executes without errors ...
and then also care that features like showon do not break

Then also you need to apply the JS-based template styles and other initialization stuff, and currently the templates do not conform to some API / do not implements some "Interface" to provide such a method for this ...

• never the less there is a "common" JS code to apply bootstrap styling, in protostar and isis templates that is usually found in all templates that we could use ... and this "hack" is already done (i think) by subform field

I have fixed code styling, and updated the testing instructions

This PR is easy and quick to test if you already have some custom fields created,
please go ahead test it

The page got also reloaded when you create a new field and do change the type. Can we add that functionality there as well? Code is here https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_fields/models/fields/type.php#L149

The page got also reloaded when you create a new field and do change the type. Can we add that functionality there as well? Code is here

Right, all similar cases should be in this PR,
will add there too, when i am at my workstation again, a little later today

I have tested this item ✅ successfully on 0ee2b7b

I have tested this item ? unsuccessfully on 0ee2b7b

- After PR "Field Group" isn't shown in "Articles: Edit".

• Click on "Field" (Type "Image") or "Field Group" got An error has occurred. 0 Call to undefined method FieldsHelper::addSubmenu()

  ---

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

It ma ybe that this branch is a bit older. Due to the way the patchtester works, this may have an effect on testing.
I've updated the branch now so it's up to date with staging, can you test again?

I have tested this item ✅ successfully on 56fc576

I have tested this item ✅ successfully on 56fc576

RTC