From f8ad9fe5906f360335862775c5381e6c34a33c78 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Mon, 25 Sep 2023 17:08:14 -0700
Subject: [PATCH] Change preloader flow

moving background color to the iframe itself to prevent LCS when the content is fetched.

we are also changing the preloader to another icon to match this flow better.
---
 includes/assets/ctb.css | 75 ++++++++++++++++++-----------------------
 includes/assets/ctb.js  |  4 ++-
 2 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/includes/assets/ctb.css b/includes/assets/ctb.css
index 07b069c..d51200d 100644
--- a/includes/assets/ctb.css
+++ b/includes/assets/ctb.css
@@ -33,16 +33,14 @@ body.noscroll {
 .global-ctb-modal-content {
     align-items: center;
     background-color: white;
-    background: white;
+    background: transparent;
     color: black;
     display: flex;
-    height: 80vh;
     justify-content: center;
     margin: auto;
     max-height: 80vh;
+    min-width: 960px;
     max-width: 80vw;
-    min-height: 80vh;
-    min-width: 80vw;
     padding: 0;
     position: relative;
     z-index: 2;
@@ -58,12 +56,13 @@ body.noscroll {
 }
 
 .global-ctb-modal iframe {
+    background-color: white;
+    min-height: 550px;
     height: 100%;
     max-height: 100%;
-    max-width: 100%;
-    min-height: 100%;
-    min-width:100%;
     width: 100%;
+    max-width: 100%;
+    border-radius: 5px;
     z-index: 1;
 }
 
@@ -73,51 +72,41 @@ body.noscroll {
 }
 
 .global-ctb-loader {
-    -webkit-animation: globalctbloader .9s infinite linear;
-    animation: globalctbloader .9s infinite linear;
-    background: #3575d3;
-    background: linear-gradient(to right, #3575d3 5%, rgba(0, 0, 0, 0) 32%);
-    border-radius: 50%;
-    height: 5rem;
+    width: 8px;
+    height: 40px;
+    border-radius: 4px;
+    display: block;
+    margin: 20px auto;
     position: relative;
-    transform: translateZ(0);
-    width: 5rem;
-    will-change: transform;
+    background: currentColor;
+    color: #FFF;
+    box-sizing: border-box;
+    animation: globalctbloader 0.3s 0.3s linear infinite alternate;
 }
 
-.global-ctb-loader:before {
-    background: #3575d3;
-    border-radius: 100% 0 0 0;
-    content: "";
-    height: 50%;
-    left: 0;
+.global-ctb-loader::after,
+.global-ctb-loader::before {
+    content: '';
+    width: 8px;
+    height: 40px;
+    border-radius: 4px;
+    background: currentColor;
     position: absolute;
-    top: 0;
-    width: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 20px;
+    box-sizing: border-box;
+    animation: globalctbloader 0.3s  0.45s  linear infinite alternate;
 }
 
-.global-ctb-loader:after {
-    background: #fff;
-    border-radius: 50%;
-    bottom: 0;
-    content: "";
-    height: 88%;
-    left: 0;
-    margin: auto;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 88%;
+.global-ctb-loader:before {
+    left: -20px;
+    animation-delay: 0s;
 }
 
 @keyframes globalctbloader {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
+    0%   { height: 48px} 
+    100% { height: 4px}
 }
 
 .global-ctb-modal-close {
diff --git a/includes/assets/ctb.js b/includes/assets/ctb.js
index eed2c74..bbd6a72 100644
--- a/includes/assets/ctb.js
+++ b/includes/assets/ctb.js
@@ -31,6 +31,8 @@
                 }
             })
             .then(data => {
+                // enable close button
+                modalWindow.querySelector('.global-ctb-modal-close').style.display = 'flex';
                 // set the content to an iframe of specified url
                 let iframe = document.createElement('iframe');
                 iframe.src = data.url;
@@ -112,7 +114,7 @@
 		<div class="global-ctb-modal">
 			<div class="global-ctb-modal-overlay" data-a11y-dialog-destroy></div>
 			<div role="document" class="global-ctb-modal-content">
-				<div class="global-ctb-modal-close" data-a11y-dialog-destroy>✕</div>
+				<div class="global-ctb-modal-close" data-a11y-dialog-destroy style="display:none;">✕</div>
 				<div class="global-ctb-loader"></div>
 			</div>
 		</div>