refactor(payment_link): Decouple shimmer css from main payment_link c…

…ss for better performance (#4286)
juspay · Apr 4, 2024 · 9453e8f · 9453e8f
1 parent ad1f74f
commit 9453e8f
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 85 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
@@ -29,90 +29,6 @@ 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;

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
@@ -9,7 +9,88 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800">
     <style>
-      {{rendered_css}}
+      #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; 
+        }
+      }
     </style>
   </head>
   <body class="hide-scrollbar">
@@ -39,6 +120,10 @@
         </div>
       </div>
     </div>
+    <style>
+      {{rendered_css}}
+    </style>
+
     <!-- SVG ICONS -->
     <svg xmlns="http://www.w3.org/2000/svg" display="none">
       <defs>