From 70bcbcab2b6729bd9e9b958cf04b9b50f5d166a6 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Wed, 22 Nov 2023 03:37:58 +0200
Subject: [PATCH] IMPR: Form loading improvements

---
 package.json                             |  2 +-
 src/js/ajax/form.js                      | 27 +++++++++++++-----------
 src/scss/layout/main/states/network.scss |  2 ++
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 29b63bf..4f0ab96 100644
--- a/package.json
+++ b/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",
diff --git a/src/js/ajax/form.js b/src/js/ajax/form.js
index 8a4ec5a..48c69e2 100644
--- a/src/js/ajax/form.js
+++ b/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)
diff --git a/src/scss/layout/main/states/network.scss b/src/scss/layout/main/states/network.scss
index b15b81c..cd98d03 100644
--- a/src/scss/layout/main/states/network.scss
+++ b/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;