[Source Table]: View Content Tab - Status Column Misalignment with Figma Design

src/components/SourcesTableModal/SourcesView/Content/Table/TableRow.tsx

@@ -1,16 +1,17 @@
 import React, { memo } from 'react'
+import styled from 'styled-components'
+import { Animation } from '~/components/Stats/Animation'
+import { Node } from '~/network/fetchSourcesData'
+import { colors, formatDate } from '~/utils'
 import { StyledTableCell, StyledTableRow } from '../../common'
 import { TWITTER_CONTENT_LINK } from '../../constants'
-import { Node } from '~/network/fetchSourcesData'
-import { formatDate, colors } from '~/utils'
-import styled from 'styled-components'
 
 interface TableRowProps {
   node: Node
 }
 
-function capitalizeFirstLetter(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
+function toUpperCase(string: string) {
+  return string.toUpperCase()
 }
 
 const TableRowComponent: React.FC<TableRowProps> = ({ node }) => (
@@ -44,7 +45,28 @@ const TableRowComponent: React.FC<TableRowProps> = ({ node }) => (
       )}
     </StyledTableCell>
     <StyledTableCell>
-      {node?.properties?.status ? capitalizeFirstLetter(node.properties.status) : 'Processing'}
+      {(() => {
+        const status = node?.properties?.status
+
+        if (!status) {
+          return (
+            <>
+              PROCESSING{' '}
+              <AnimationContainer>
+                <Animation id={`animation-${node.ref_id}`} />
+              </AnimationContainer>
+            </>
+          )
+        }
+
+        const statusLower = (status as string).toLowerCase()
+
+        if (statusLower === 'complete') {
+          return <CompletedStatus>{toUpperCase(status)}</CompletedStatus>
+        }
+
+        return toUpperCase(status)
+      })()}
     </StyledTableCell>
   </StyledTableRow>
 )
@@ -57,4 +79,26 @@ const StyledLink = styled.a`
   }
 `
 
+const CompletedStatus = styled.div`
+  background-color: ${colors.COMPLETED_STATUS};
+  color: ${colors.SUCESS};
+  padding: 4px 10px;
+  border-radius: 5px;
+  font-size: 10px;
+  font-family: 'Barlow';
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.1em;
+  text-align: right;
+  display: inline-block;
+`
+
+const AnimationContainer = styled.div`
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  vertical-align: middle;
+  margin-left: 0.5em;
+`
+
 export const TopicRow = memo(TableRowComponent)

src/components/Stats/Animation/index.tsx

@@ -2,11 +2,16 @@ import lottie, { AnimationItem } from 'lottie-web'
 import { useEffect, useRef } from 'react'
 import animationData from './animation.json'
 
-export const Animation = () => {
+type AnimationProps = {
+  id: string
+}
+
+// eslint-disable-next-line react/prop-types
+export const Animation: React.FC<AnimationProps> = ({ id }) => {
   const lottieRef = useRef<AnimationItem | null>(null)
 
   useEffect(() => {
-    const container = document.getElementById('lottie-animation')
+    const container = document.getElementById(id)
 
     if (container) {
       lottieRef.current = lottie.loadAnimation({
@@ -22,7 +27,7 @@ export const Animation = () => {
         lottieRef.current.destroy()
       }
     }
-  }, [])
+  }, [id])
 
-  return <div id="lottie-animation" style={{ width: '2em', height: '2em' }} />
+  return <div id={id} style={{ width: '2em', height: '2em' }} />
 }

src/components/Stats/index.tsx

@@ -1,21 +1,21 @@
 import { noop } from 'lodash'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
+import { Icons } from '~/components/Icons'
 import BudgetIcon from '~/components/Icons/BudgetIcon'
 import NodesIcon from '~/components/Icons/NodesIcon'
 import { Tooltip } from '~/components/common/ToolTip'
 import { getStats, getTotalProcessing } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUpdateSelectedNode } from '~/stores/useGraphStore'
 import { useModal } from '~/stores/useModalStore'
+import { useSchemaStore } from '~/stores/useSchemaStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { TStats } from '~/types'
 import { formatBudget, formatStatsResponse } from '~/utils'
 import { colors } from '~/utils/colors'
 import { Flex } from '../common/Flex'
 import { Animation } from './Animation'
-import { Icons } from '~/components/Icons'
-import { useSchemaStore } from '~/stores/useSchemaStore'
 
 export const Stats = () => {
   const [isTotalProcessing, setIsTotalProcessing] = useState(false)
@@ -131,7 +131,7 @@ export const Stats = () => {
         {isTotalProcessing ? (
           <ViewContent data-testid="view-content" onClick={openSourcesModal}>
             <div className="icon" style={{ marginLeft: '7px' }}>
-              <Animation />
+              <Animation id="lottie-animation" />
             </div>
             <div className="text">
               <p>{totalProcessing}</p>

src/utils/colors/index.tsx

@@ -108,6 +108,7 @@ export const colors = {
   createTestButton: 'rgb(178, 255, 102)',
   MESSAGE_BG: 'rgba(22, 22, 29, 0.89)',
   MESSAGE_BG_HOVER: 'rgba(35, 37, 47, 0.3)',
+  COMPLETED_STATUS: 'rgba(31, 61, 43, 0.50)',
 } as const
 
 export type ColorName = keyof typeof colors