rust/hyperswitch
1
0
Fork 0
mirror of https://github.com/juspay/hyperswitch.git synced 2025-10-28 04:04:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(payment_link): add shimmer page before payment_link loads starts (#4014)

Browse Source
This commit is contained in:
Sahkal Poddar
2024-03-08 16:30:24 +05:30
committed by GitHub
parent 2b65da9e6b
commit ba9d465483
3 changed files with 122 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
crates/router/src/core/payment_link/payment_link_initiate/payment_link.css
View File

@ -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;

26
crates/router/src/core/payment_link/payment_link_initiate/payment_link.html
View File

@ -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>

11
crates/router/src/core/payment_link/payment_link_initiate/payment_link.js
View File

@ -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