fix: make loading indicator for pools nft card use a shine rather than spinner (#7071)

fix: make loading indicator for pools nft card use a shine rather than spinner and fill the full height

src/components/Loader/styled.tsx

@@ -9,22 +9,26 @@ export const loadingAnimation = keyframes`
   }
 `
 
+const shimmerMixin = css`
+  animation: ${loadingAnimation} 1.5s infinite;
+  animation-fill-mode: both;
+  background: linear-gradient(
+    to left,
+    ${({ theme }) => theme.deprecated_bg1} 25%,
+    ${({ theme }) => theme.backgroundInteractive} 50%,
+    ${({ theme }) => theme.deprecated_bg1} 75%
+  );
+  background-size: 400%;
+  will-change: background-position;
+`
+
 export const LoadingRows = styled.div`
   display: grid;
 
   & > div {
-    animation: ${loadingAnimation} 1.5s infinite;
+    ${shimmerMixin}
-    animation-fill-mode: both;
-    background: linear-gradient(
-      to left,
-      ${({ theme }) => theme.deprecated_bg1} 25%,
-      ${({ theme }) => theme.backgroundInteractive} 50%,
-      ${({ theme }) => theme.deprecated_bg1} 75%
-    );
-    background-size: 400%;
     border-radius: 12px;
     height: 2.4em;
-    will-change: background-position;
   }
 `
 
@@ -37,3 +41,9 @@ export const loadingOpacityMixin = css<{ $loading: boolean }>`
 export const LoadingOpacityContainer = styled.div<{ $loading: boolean }>`
   ${loadingOpacityMixin}
 `
+
+export const LoadingFullscreen = styled.div`
+  ${shimmerMixin}
+  inset: 0;
+  position: absolute;
+`

src/pages/Pool/PositionPage.tsx

@@ -12,7 +12,7 @@ import { ButtonConfirmed, ButtonGray, ButtonPrimary } from 'components/Button'
 import { DarkCard, LightCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
-import Loader from 'components/Icons/LoadingSpinner'
+import { LoadingFullscreen } from 'components/Loader/styled'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { RowBetween, RowFixed } from 'components/Row'
 import { Dots } from 'components/swap/styleds'
@@ -716,7 +716,8 @@ function PositionPageContent() {
             <ResponsiveRow align="flex-start">
               <HideSmall
                 style={{
-                  marginRight: '12px',
+                  height: '100%',
+                  marginRight: 12,
                 }}
               >
                 {'result' in metadata ? (
@@ -744,9 +745,11 @@ function PositionPageContent() {
                     height="100%"
                     style={{
                       minWidth: '340px',
+                      position: 'relative',
+                      overflow: 'hidden',
                     }}
                   >
-                    <Loader />
+                    <LoadingFullscreen />
                   </DarkCard>
                 )}
               </HideSmall>