IMPR: Form loading improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
-  "version": "5.1.7",
+  "version": "5.1.8",
   "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
   "author": "Tony Air <tony@twma.pro>",
   "license": "BSD-2-Clause",

src/js/ajax/form.js

@@ -19,7 +19,7 @@ const submitForm = (e) => {
   })
 
   data.append('ajax', '1')
-  form.classList.add('loading')
+  form.parentElement.classList.add('loading')
 
   fetch(form.action, {
     method: form.method,
@@ -49,19 +49,12 @@ const submitForm = (e) => {
 const replaceForm = (form, html) => {
   const parent = form.parentElement;
 
-  if (parent.classList.contains(CONTAINER_CLASS)) {
-    parent.innerHTML = html
-
-    window.dispatchEvent(new Event(`${Events.AJAX}`))
-    return
-  }
-
-  const elHtml = document.createElement('div')
-  elHtml.classList.add(CONTAINER_CLASS)
-  elHtml.innerHTML = html
-  form.replaceWith(elHtml)
+  parent.innerHTML = html
+  parent.classList.remove('loading')
+  parent.classList.add('loaded')
 
   window.dispatchEvent(new Event(`${Events.AJAX}`))
+  return
 }
 
 const formInit = (form) => {
@@ -70,6 +63,16 @@ const formInit = (form) => {
     return false
   }
 
+  // wrap form
+  const parent = form.parentElement;
+
+  if (!parent.classList.contains(CONTAINER_CLASS)) {
+    const elHtml = document.createElement('div')
+    elHtml.classList.add(CONTAINER_CLASS)
+    elHtml.append(form)
+  }
+  //
+
   form.dataset[`${NAME}Active`] = true
 
   form.addEventListener('submit', submitForm)

src/scss/layout/main/states/network.scss

@@ -11,12 +11,14 @@
   animation: fade 3s linear infinite;
 }
 
+.form-container.loading,
 main.loading {
   animation: shrink 0.5s linear 1;
   max-height: 0;
   overflow: hidden;
 }
 
+.form-container.loaded,
 main.loaded {
   animation: expand 0.5s linear 1;
   max-height: fit-content;