Prevent flash of unstyled tabs on page load (#4666)

Credit to @tobias-kuendig.

modules/backend/widgets/form/partials/_form_tabs.htm

@@ -15,7 +15,14 @@
     <ul class="nav nav-tabs">
         <?php $index = 0; foreach ($tabs as $name => $fields): ?>
             <li class="<?= $index++ == 0 ? 'active' : '' ?>">
-                <a href="#<?= $type . 'tab-' . $index ?>"><?php if ($tabs->getIcon($name)): ?><span class="<?= $tabs->getIcon($name) ?>"></span><?php endif; ?><?= e(trans($name)) ?></a>
+                <a href="#<?= $type . 'tab-' . $index ?>">
+                    <span class="title">
+                        <span>
+                            <?php if ($tabs->getIcon($name)): ?><span class="<?= $tabs->getIcon($name) ?>"></span><?php endif; ?>
+                            <?= e(trans($name)) ?>
+                        </span>
+                    </span>
+                </a>
             </li>
         <?php endforeach ?>
     </ul>

modules/system/assets/ui/js/tab.js

@@ -102,12 +102,14 @@
         if (!$anchor.attr('title'))
             $anchor.attr('title', $anchor.text())
 
-        var html = $anchor.html()
-
-        $anchor.html('')
-        $anchor
-            .append($('<span class="title"></span>')
-            .append($('<span></span>').html(html)))
+        // Setup the required tabs markup if it does not exist already.
+        if ($anchor.find('> span.title > span').length < 1) {
+            var html = $anchor.html()
+            $anchor
+                .html('')
+                .append($('<span class="title"></span>')
+                .append($('<span></span>').html(html)))
+        }
 
         var pane = $('> .tab-pane', this.$pagesContainer).eq(tabIndex).attr('id', targetId)