fixed page and table loaders

src/components/app-form/AppFormElement.ts

@@ -35,7 +35,7 @@ class AppFormElement extends BaseComponentElement {
 	};
 
 	public onSubmit = (e) => {
-		e.preventDefault();
+		//e.preventDefault();
 		if (!this.isValid) {
 			return;
 		}
@@ -135,7 +135,13 @@ class AppFormElement extends BaseComponentElement {
 
 		return html`
 			<div class="app-form">
-				<form app-action="submit:app-form#onSubmit" data-target="app-form.formElement">
+				<form
+					app-action="submit:app-form#onSubmit"
+					data-target="app-form.formElement"
+					autocomplete="on"
+					method="POST"
+					action="javascript:void(0)"
+				>
 					${this.renderInput ? this.customRender() : html`<slot data-target="app-form.innerSlot"></slot>`}
 					${renderError(this.error)}
 					<div class="form-buttons">

src/components/app-loader/AppLoaderElement.ts

@@ -51,7 +51,9 @@ class AppLoaderElement extends BaseComponentElement {
 			}
 			return html``;
 		};
-		return html`${renderLoader(this.finished, this.loading)}`;
+		return html`<div class="loader-wrapper">
+			<div class="loader-relative">${renderLoader(this.finished, this.loading)}</div>
+		</div>`;
 	};
 }
 

src/components/app-pagination/AppPaginationElement.ts

@@ -142,18 +142,28 @@ class AppPaginationElement extends BaseComponentElement {
 						<span class="--total">(${items?.length}) / ${totalItems} Total Items</span>
 						<div class="--footer">
 							<span class="--pages">Page ${page} of ${pageRange}</span>
-							<button
+							${page <= 1 || this.loader.loading
-								class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
+								? html` <button
+										class="btn btn-primary btn-squared disabled"
+										disabled
 										app-action="click:app-pagination#pageBack"
 								  >
 										Prev
-							</button>
+								  </button>`
-							<button
+								: html` <button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageBack">
-								class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
+										Prev
+								  </button>`}
+							${page >= pageRange || this.loader.loading
+								? html` <button
+										class="btn btn-primary btn-squared disabled"
+										disabled
 										app-action="click:app-pagination#pageNext"
 								  >
 										Next
-							</button>
+								  </button>`
+								: html`<button class="btn btn-primary btn-squared" app-action="click:app-pagination#pageNext">
+										Next
+								  </button>`}
 						</div>
 					</div>
 				`;
@@ -161,9 +171,10 @@ class AppPaginationElement extends BaseComponentElement {
 		};
 
 		return html`<div class="app-pagination">
-			<table class="${this.tableLayout}">
+			<table class="${this.tableLayout} ${this.loader && this.loader.loading ? '--loading' : ''}">
 				${renderItems()} ${renderPagination()}
 			</table>
+			${this.loader && this.loader.loading ? html`<circle-loader></circle-loader>` : html``}
 		</div>`;
 	};
 }

src/components/input-field/InputFieldElement.ts

@@ -33,7 +33,7 @@ class InputFieldElement extends BaseComponentElement {
 		this.validator = new Validator(this, this.appForm, this.rules);
 		this.randId = `${name}${randomId()}`;
 		this.update();
-		this.validate();
+		//this.validate();
 	};
 
 	setError = (error) => {
@@ -83,11 +83,12 @@ class InputFieldElement extends BaseComponentElement {
 		if (!this.changed && e?.target?.value) {
 			this.changed = true;
 		}
-		this.validate();
+		//this.validate();
 		this.appForm?.inputChange(e);
 	};
 
 	render = (): TemplateResult => {
+		console.log('e');
 		const renderMessage = (label: string) => {
 			if (this.label) {
 				return html`<label for="${this.randId}">${this.label}${this.required ? ' (*)' : ''}</label>`;
@@ -105,19 +106,20 @@ class InputFieldElement extends BaseComponentElement {
 		const renderInput = (type) => {
 			if (this.pattern) {
 				return html` <input
+					name="${this.name}"
+					autocomplete="${this.name}"
 					type="${this.type}"
 					pattern="${this.pattern}"
 					step="0.01"
 					data-target="input-field.inp"
 					id="${this.randId}"
-					app-action="
+					app-action=" input:input-field#inputChange blur:input-field#validateDisplay
-                    input:input-field#inputChange
+				${this.customAction ? this.customAction : ''} "
-                    blur:input-field#validateDisplay
-					${this.customAction ? this.customAction : ''}
-                "
 				/>`;
 			}
 			return html` <input
+				name="${this.name}"
+				autocomplete="${this.name}"
 				type="${this.type}"
 				data-target="input-field.inp"
 				id="${this.randId}"

src/pages/login-page/LoginPageElement.ts

@@ -78,10 +78,8 @@ class LoginPageElement extends BasePageElement {
 		return _return;
 	}
 
-	render = (): TemplateResult => {
+	renderForms = () => {
-		return html`
+		return html` <input-field
-			<app-form data-custom="login-page#onSubmit" data-target="login-page.appForm">
-				<input-field
 				data-type="email"
 				data-name="email"
 				data-label="E-mail"
@@ -95,7 +93,16 @@ class LoginPageElement extends BasePageElement {
 				data-targets="login-page.inputs"
 				data-rules="required"
 			>
-				</input-field>
+			</input-field>`;
+	};
+
+	render = (): TemplateResult => {
+		return html`
+			<app-form
+				data-custom="login-page#onSubmit"
+				data-target="login-page.appForm"
+				data-render-input="login-page#renderForms"
+			>
 			</app-form>
 			<div>
 				<app-link data-to="/register" data-title="Create new account"></app-link>

src/styles/app-loader/app-loader.scss

@@ -1,27 +1,42 @@
+.loader-wrapper {
+	position: absolute;
+	width: 100%;
+	left: 0;
+	right: 0;
+	height: 5px;
+	.loader-relative {
+		position: relative;
+		height: 5px;
+		width: 100%;
+		overflow: hidden;
 		.loader {
 			position: absolute;
 			top: 0;
-    left: 0;
+			left: -30%;
 			height: 5px;
-    width: 0;
+			width: 30%;
 			background-color: $blue-09;
 			z-index: 2000;
 			&.--loading {
-        animation: animateBar 5s linear;
+				animation: animateBar 2s linear infinite;
 			}
 
 			&.--removing {
 				width: 100%;
 			}
 		}
+	}
+}
 
 .progress .progress-bar {
 }
 @keyframes animateBar {
-    0% {
+	0%,
-        width: 0;
-    }
 	100% {
-        width: 100%;
+		left: -30%;
+	}
+
+	100% {
+		left: 100%;
 	}
 }

src/styles/app-pagination/app-pagination.scss

@@ -1,5 +1,11 @@
 app-pagination {
 	.app-pagination {
+		position: relative;
+		circle-loader > .circle-loader {
+			position: absolute;
+			inset: 0;
+			margin: auto;
+		}
 		table.transactions-table {
 			margin: 0 0 3em 0;
 			padding: 0;
@@ -8,6 +14,14 @@ app-pagination {
 			border: 1px solid $gray-09;
 			border-radius: 4px;
 			display: block;
+			&.--loading {
+				min-height: 80px;
+				tr {
+					td {
+						visibility: hidden;
+					}
+				}
+			}
 			tr {
 				background-color: $gray-07;
 				padding: 4px 12px;