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,10 +9,7 @@ export const loadingAnimation = keyframes`
   }
 `
 
-export const LoadingRows = styled.div`
-  display: grid;
-
-  & > div {
+const shimmerMixin = css`
   animation: ${loadingAnimation} 1.5s infinite;
   animation-fill-mode: both;
   background: linear-gradient(
@@ -22,9 +19,16 @@ export const LoadingRows = styled.div`
     ${({ theme }) => theme.deprecated_bg1} 75%
   );
   background-size: 400%;
+  will-change: background-position;
+`
+
+export const LoadingRows = styled.div`
+  display: grid;
+
+  & > div {
+    ${shimmerMixin}
     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>