Spinner test :dancers:
Closed this issue · 3 comments
I don't send it as PR because this needs to be tested a bit, and can to be added now here and later to other locations.
In principle I do not think it is to be used in all views. Only in the actions with more loading time.
For example, in "translations" when we have to reload the "Admin" client from scratch: it seems that the page has been broken and there are many files to download from Github + the whole process of detecting changes to translate (at least the first time takes a long time)
This will not make it go faster, but it does help to see clearly that the page is loading.
Sample code is comming from here:
https://simplifyyourweb.com/documentation/topics/1276-coding-for-joomla-4-the-new-loader
But I have modified it a bit to fit the idea:
"Only where there is load" and that, in that view, is in the "select"
Including "Factory" at the top only this "$wam" lines are required to use it normaly from any "tmpl" file. It will automaticaly create the element, and will add on the fly the JS!!.
HTMLHelper::_('jquery.framework');
$wam = Factory::getApplication()->getDocument()->getWebAssetManager();
$wam->useScript('webcomponent.core-loader');
$wam->addInlineScript("
// Page is loading
window.onload = function() {
initSpiner();
};
function initSpiner() {
spinner = document.createElement('joomla-core-loader');
document.body.appendChild(spinner);
}
// Page is loaded
jQuery(document).ready(function() {
// Close the spiner when page is loaded
var spinner = document.querySelector('joomla-core-loader');
spinner.parentNode.removeChild(spinner);
// Any field type 'select' is doing 'onchange'
jQuery('select').change(function(){
spinner = document.createElement('joomla-core-loader');
document.body.appendChild(spinner);
})
});
");
The "default" translations view if you wanna test.
What do you think?
"Cancel" or "Save and close" from "translation" view maybe also need similar solution due are returning to translations view, and from "Close options" too, for example.
<?php
/**
* @package Com_Localise
* @subpackage views
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
HTMLHelper::_('stylesheet', 'com_localise/localise.css', ['version' => 'auto', 'relative' => true]);
HTMLHelper::_('behavior.core');
HTMLHelper::_('jquery.framework');
$wam = Factory::getApplication()->getDocument()->getWebAssetManager();
$wam->useScript('webcomponent.core-loader');
$wam->addInlineScript("
// Page is loading
window.onload = function() {
initSpiner();
};
function initSpiner() {
spinner = document.createElement('joomla-core-loader');
document.body.appendChild(spinner);
}
// Page is loaded
jQuery(document).ready(function() {
// Close the spiner when page is loaded
var spinner = document.querySelector('joomla-core-loader');
spinner.parentNode.removeChild(spinner);
// Any field type 'select' is doing 'onchange'
jQuery('select').change(function(){
spinner = document.createElement('joomla-core-loader');
document.body.appendChild(spinner);
})
});
");
$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn = $this->escape($this->state->get('list.direction'));
$params = ComponentHelper::getParams('com_localise');
$ref_tag = $params->get('reference', 'en-GB');
?>
<form action="<?php echo Route::_('index.php?option=com_localise&view=translations');?>" method="post" name="adminForm" id="adminForm">
<div class="row">
<!-- Begin Content -->
<div class="col-md-12">
<div id="j-main-container" class="j-main-container">
<?php echo LayoutHelper::render('joomla.searchtools.default', array('view' => $this, 'options' => array('selectorFieldName' => 'develop'))); ?>
</div>
</div>
<div class="col-md-12 mb-2">
<?php echo $this->loadTemplate('legend'); ?>
</div>
<div class="col-md-12">
<?php if ($ref_tag == 'en-GB') : ?>
<?php echo $this->loadTemplate('references'); ?>
<?php endif; ?>
</div>
<table class="table table-striped" id="localiseList">
<thead>
<?php echo $this->loadTemplate('head'); ?>
</thead>
<tfoot>
<?php echo $this->loadTemplate('foot'); ?>
</tfoot>
<tbody>
<?php echo $this->loadTemplate('body'); ?>
</tbody>
</table>
<input type="hidden" name="boxchecked" value="0" />
<input type="hidden" name="task" value="" />
<?php echo HTMLHelper::_('form.token'); ?>
</div>
<!-- End Content -->
</form>
@Valc
Very good idea.
It looks like no need for Factory here as $this->document works fine. The reason is that I don't really see where we would need it else than in the translations view.
Use $wa instead of $wam as done in core.
Here I made it better English
<?php
/**
* @package Com_Localise
* @subpackage views
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
HTMLHelper::_('stylesheet', 'com_localise/localise.css', ['version' => 'auto', 'relative' => true]);
HTMLHelper::_('behavior.core');
HTMLHelper::_('jquery.framework');
$wa = $this->document->getWebAssetManager();
$wa->useScript('webcomponent.core-loader');
$wa->addInlineScript("
// Page is loading
window.onload = function() {
initSpinner();
};
function initSpinner() {
spinner = document.createElement('joomla-core-loader');
document.body.appendChild(spinner);
}
// Page is loaded
jQuery(document).ready(function() {
// Close the spinner when page is loaded
var spinner = document.querySelector('joomla-core-loader');
spinner.parentNode.removeChild(spinner);
// Any field from the "Select" fieldset triggers the spinner
jQuery('select').change(function(){
spinner = document.createElement('joomla-core-loader');
document.body.appendChild(spinner);
})
});
");
$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn = $this->escape($this->state->get('list.direction'));
$params = ComponentHelper::getParams('com_localise');
$ref_tag = $params->get('reference', 'en-GB');
?>
<form action="<?php echo Route::_('index.php?option=com_localise&view=translations');?>" method="post" name="adminForm" id="adminForm">
<div class="row">
<!-- Begin Content -->
<div class="col-md-12">
<div id="j-main-container" class="j-main-container">
<?php echo LayoutHelper::render('joomla.searchtools.default', array('view' => $this, 'options' => array('selectorFieldName' => 'develop'))); ?>
</div>
</div>
<div class="col-md-12 mb-2">
<?php echo $this->loadTemplate('legend'); ?>
</div>
<div class="col-md-12">
<?php if ($ref_tag == 'en-GB') : ?>
<?php echo $this->loadTemplate('references'); ?>
<?php endif; ?>
</div>
<table class="table table-striped" id="localiseList">
<thead>
<?php echo $this->loadTemplate('head'); ?>
</thead>
<tfoot>
<?php echo $this->loadTemplate('foot'); ?>
</tfoot>
<tbody>
<?php echo $this->loadTemplate('body'); ?>
</tbody>
</table>
<input type="hidden" name="boxchecked" value="0" />
<input type="hidden" name="task" value="" />
<?php echo HTMLHelper::_('form.token'); ?>
</div>
<!-- End Content -->
</form>
Evidently, if you prefer to make it a general js, then we should use Factory and then it would be cleaner to create a "spinner.js" in com_localise media/js/
we would have I guess something like:
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useScript('webcomponent.core-loader')
->useScript('spinner.js');
@infograf768
Since it seems that there is more than one way to implement it, if it seems good to you, could you take charge of proposing this PR with the option that seems best to you and I will help you by testing :)
Meanwhile I can see to improve the issue that of "delete the xx-XX files" that were left when a 3.x branch was selected from "source reference"
#34 (comment)
Please test #37