fixed page and table loaders

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

@@ -1,27 +1,42 @@
-.loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 5px;
-    width: 0;
-    background-color: $blue-09;
-    z-index: 2000;
-    &.--loading {
-        animation: animateBar 5s linear;
-    }
+.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: -30%;
+			height: 5px;
+			width: 30%;
+			background-color: $blue-09;
+			z-index: 2000;
+			&.--loading {
+				animation: animateBar 2s linear infinite;
+			}
 
-    &.--removing {
-        width: 100%;
-    }
+			&.--removing {
+				width: 100%;
+			}
+		}
+	}
 }
 
 .progress .progress-bar {
 }
 @keyframes animateBar {
-    0% {
-        width: 0;
-    }
-    100% {
-        width: 100%;
-    }
+	0%,
+	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;