fix: token details loading state fixes (#5567)

* init

* no export

* respond to jordan

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -73,7 +73,7 @@ export const TokenPrice = styled.span`
   font-size: 36px;
   line-height: 44px;
 `
-export const DeltaContainer = styled.div`
+const DeltaContainer = styled.div`
   height: 16px;
   display: flex;
   align-items: center;

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -9,7 +9,7 @@ import { LoadingBubble } from '../loading'
 import { LogoContainer } from '../TokenTable/TokenRow'
 import { AboutContainer, AboutHeader } from './About'
 import { BreadcrumbNavLink } from './BreadcrumbNavLink'
-import { DeltaContainer, TokenPrice } from './PriceChart'
+import { TokenPrice } from './PriceChart'
 import { StatPair, StatsWrapper, StatWrapper } from './StatsSection'
 
 export const Hr = styled.hr`
@@ -97,31 +97,32 @@ const TokenLogoBubble = styled(DetailBubble)`
   border-radius: 50%;
 `
 const TitleBubble = styled(DetailBubble)`
-  width: 140px;
+  width: 136px;
 `
 const PriceBubble = styled(SquaredBubble)`
-  margin-top: 2px;
-  height: 38px;
-`
-const DeltaBubble = styled(DetailBubble)`
-  margin-top: 6px;
-  width: 96px;
-  height: 20px;
+  margin-top: 4px;
+  height: 40px;
 `
+
 const SectionBubble = styled(SquaredBubble)`
-  width: 96px;
+  width: 120px;
 `
 const StatTitleBubble = styled(DetailBubble)`
-  width: 25%;
+  width: 80px;
   margin-bottom: 4px;
 `
 const StatBubble = styled(SquaredBubble)`
-  width: 50%;
+  width: 116px;
 `
 const WideBubble = styled(DetailBubble)`
   margin-bottom: 6px;
   width: 100%;
 `
+
+const ThinTitleBubble = styled(WideBubble)`
+  width: 120px;
+`
+
 const HalfWideBubble = styled(WideBubble)`
   width: 50%;
 `
@@ -131,6 +132,11 @@ const StatsLoadingContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
 `
+
+const ExtraDetailsContainer = styled.div`
+  padding-top: 24px;
+`
+
 const ChartAnimation = styled.div`
   animation: wave 8s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
   display: flex;
@@ -165,9 +171,6 @@ export function LoadingChart() {
       <TokenPrice>
         <PriceBubble />
       </TokenPrice>
-      <DeltaContainer>
-        <DeltaBubble />
-      </DeltaContainer>
       <Space heightSize={6} />
       <LoadingChartContainer>
         <div>
@@ -242,7 +245,15 @@ export default function TokenDetailsSkeleton() {
       </AboutContainer>
       <WideBubble />
       <WideBubble />
+      <HalfWideBubble style={{ marginBottom: '24px' }} />
+      <ExtraDetailsContainer>
+        <ThinTitleBubble />
+        <HalfWideBubble />
+      </ExtraDetailsContainer>
+      <ExtraDetailsContainer>
+        <ThinTitleBubble />
         <HalfWideBubble />
+      </ExtraDetailsContainer>
     </LeftPanel>
   )
 }