Added lazy loading for backend form tabs

[tobias-kuendig]

Once a backend form has lots of fields with lots of widgets in lots of tabs, the page load time becomes a problem. We did have this problem with our Mall plugin, where the Product edit form is massive.

This problem lead me to try out a new "lazy" property for the tab definition. In it, you can define what tabs you want to load only once they are activated:

tabs:
    lazy:
        - 'Tab 1'
        - 'Tab 2'
        - 'Tab 3'
    fields:
        # ...

This reduced the backend "load" event on the Mall Product form from ~3.8s to ~2.5s on my local dev machine.

What do you guys think? If this can be included into the core I will add the necessary documentation.

[w20k]

Looks awesome @tobias-kuendig!

[bennothommo]

@tobias-kuendig Looks incredible, good job! The one thing that springs to mind though - if a person hasn't lazy loaded a tab, will those fields still contribute to the data that is saved? For example, a field with a default value - will that default value still be used during save?

[SebastiaanKloos]

And preset and trigger fields in tabs which are not loaded?

[tobias-kuendig]

Thank you all for the feedback! You have raised some very good points.

By adding hidden input fields for all fields of a lazy loaded tab, we can solve the trigger, preset and default value problems:

By having a hidden field with the default or current value present, the value will sill be sent to the backend for deferred tabs that have not yet been loaded. This results in the same payload with lazy loaded tabs as it does without them.

The same is true for triggers and presets: The trigger and preset JS events will work for the hidden fields as well, so any field that would be disabled by a trigger (and therefore not be sent to the backend) will be disabled now as well.

The only problem is when a "hidden" field is filled by a preset and the user then activates a tab. In this case the previously generated preset will be lost since the part of the form is rebuilt. I circumvented this issue by triggering an input event on all fields that depend on a preset, after a lazy tab was loaded. This, to me, seems like the easiest solution to this problem.

I did some testing of this with the playground plugin. I did not bother to come up with a valid use-case. But if someone wants to tinker around with it, you can use this fork: https://github.com/OFFLINE-GmbH/test-plugin/tree/lazy-loading-tabs

To show how everything works I did temporarily change the hidden fields to default text fields so you can see what the values would be for deferred tabs. Once the tab is loaded these fields are replaced by the original form inputs.
Note that I did slow down the tab loading process on purpose to make it easier to grasp the workflow:

[bennothommo]

@tobias-kuendig Have you had a chance to test lazy loaded tabs with form widgets that use AJAX handlers - eg. a repeater or media finder field? Do those still work?

[tobias-kuendig]

Yes, everything is working as expected ‒ I did, however, find a problem with the "hidden" fields for repeaters since they use arrays of arrays as values.

I'll look into it.

[serkanbektas]

Thanks for development. That seems very good

[daftspunk]

Looks good! Thoughtful code and implemented using an opt-in approach

[iotch]

Lazy loading works only with primary tabs, throws "Invalid argument supplied for foreach()" on secondary.

[LukeTowers]

@iotch submit a new issue for that please with full details

[iotch]

I'd like to hear from @tobias-kuendig if this is intended

[tobias-kuendig]

The original PR did not take secondary tabs into consideration. I have no idea how much effort it would be to implement the feature for them as well.

If they re-use most of the other tab code it might be nothing more than searching the secondary tabs in the line you commented on as well.

[mjauvin]

I think the following changes can fix this:

• add data-tab-section="<?= $type ?>" to the "a" element in modules/backend/widgets/form/partials/_form_tabs.htm:

<a href="#<?= $type . 'tab-' . $index ?>" data-tab-name="<?= e($name) ?>" data-tab-section="<?= $type ?>">

• add section: $el.data('tab-section') to FormWidget.prototype.bindLazyTabs in modules/backend/widgets/form/assets/js/october.form.js:

data: { 
    target: $el.data('target'),
    name: $el.data('tab-name'),
    section: $el.data('tab-section'),
},      

• modify the onLazyLoadTab() method in modules/backend/widgets/Form.php to use the new section post data:

$tabSection = post('section');

$fields = array_get(optional($this->getTab($tabSection))->fields, $tabName);