feat(payment_link): add shimmer page before payment_link loads starts (…

…#4014)
juspay · Mar 8, 2024 · ba9d465 · ba9d465
1 parent 2b65da9
commit ba9d465
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 2 deletions.
diff --git a/crates/router/src/core/payment_link/payment_link_initiate/payment_link.css b/crates/router/src/core/payment_link/payment_link_initiate/payment_link.css
@@ -1,5 +1,6 @@
 {{ css_color_scheme }}
 
+
 html,
 body {
   height: 100%;
@@ -28,6 +29,90 @@ body {
   /* Firefox */
 }
 
+/* add shimmer */
+#payment-details-shimmer{
+  min-width: 300px;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, #f6f7f8 0%, #edeef1 50%, #f6f7f8 100%);
+  background-size: 300%;
+  animation: shimmer 1.5s infinite linear;
+  background-position-x: -100%;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  flex-direction: column; 
+  z-index: 3;
+  transition: opacity 0.5s;
+  opacity: 1;
+}
+
+.reduce-opacity {
+  opacity: 0 !important;
+}
+
+.shine {
+  background: #f6f7f8;
+  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+  background-repeat: no-repeat;
+  background-size: 800px 104px; 
+  display: inline-block;
+  position: relative; 
+  justify-content: center;
+  display: flex;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-fill-mode: forwards; 
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+}
+
+.wrap {
+  display: inline-flex;
+  margin: 10px;
+}
+
+box {
+  height: 104px;
+  width: 100px;
+  border-radius: 25px;
+}
+
+lines {
+  height: 15px;
+  width: 200px; 
+  border-radius: 25px;
+  margin: 7px;
+} 
+
+.line-shimmer > :first-child{
+  width: 140px; 
+}
+
+.line-shimmer {
+  display: inline-flex;
+  flex-direction: column; 
+  margin-left: 25px;
+  margin-top: 15px;
+  vertical-align: top; 
+} 
+
+@-webkit-keyframes placeholderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0; 
+  }
+}
+
 /* For ellipsis on text lines */
 .ellipsis-container-3 {
   height: 4em;
@@ -608,7 +693,7 @@ body {
 #payment-form {
   max-width: 560px;
   width: 100%;
-  min-height: 500px;
+  /* min-height: 500px; */
   max-height: 90vh;
   height: 100%;
   overflow: scroll;

diff --git a/crates/router/src/core/payment_link/payment_link_initiate/payment_link.html b/crates/router/src/core/payment_link/payment_link_initiate/payment_link.html
@@ -13,6 +13,32 @@
     />
   </head>
   <body class="hide-scrollbar">
+    <div id="payment-details-shimmer">
+      <div class = "wrap">
+        <box class="shine"></box>
+        <div class="line-shimmer">
+          <lines class="shine"></lines>
+          <lines class="shine"></lines>
+          <lines class="shine"></lines>
+        </div>
+      </div>
+      <div class = "wrap">
+        <box class="shine"></box>
+        <div class="line-shimmer">
+          <lines class="shine"></lines>
+          <lines class="shine"></lines>
+          <lines class="shine"></lines>
+        </div>
+      </div>
+      <div class = "wrap">
+        <box class="shine"></box>
+        <div class="line-shimmer">
+          <lines class="shine"></lines>
+          <lines class="shine"></lines>
+          <lines class="shine"></lines>
+        </div>
+      </div>
+    </div>
     <!-- SVG ICONS -->
     <svg xmlns="http://www.w3.org/2000/svg" display="none">
       <defs>

diff --git a/crates/router/src/core/payment_link/payment_link_initiate/payment_link.js b/crates/router/src/core/payment_link/payment_link_initiate/payment_link.js
@@ -399,7 +399,8 @@ function initializeSDK() {
       : paymentDetails.sdk_layout;
 
   var unifiedCheckoutOptions = {
-    disableSaveCards: true,
+    displaySavedPaymentMethodsCheckbox: true,
+    displaySavedPaymentMethods: true,
     layout: {
       type: type, //accordion , tabs, spaced accordion
       spacedAccordionItems: paymentDetails.sdk_layout === "spaced_accordion",
@@ -417,8 +418,16 @@ function initializeSDK() {
   unifiedCheckout = widgets.create("payment", unifiedCheckoutOptions);
   mountUnifiedCheckout("#unified-checkout");
   showSDK();
+
+  let shimmer = document.getElementById("payment-details-shimmer");
+  shimmer.classList.add("reduce-opacity")
+
+  setTimeout(() => {
+    document.body.removeChild(shimmer);
+  }, 500)
 }
 
+
 /**
  * Use - mount payment widget on the passed element
  * @param {String} id