loader fixes

ui/shared/ContentLoader.tsx

@@ -2,14 +2,14 @@ import { Box, Text, useColorModeValue } from '@chakra-ui/react';
 import { keyframes } from '@chakra-ui/system';
 import React from 'react';
 
-const fade = keyframes`
+const runnerAnimation = keyframes`
     0% { left: 0%; transform: translateX(-1%); }
     100% { left: '100%'; transform: translateX(-99%); }
 `;
 
 const ContentLoader = () => {
   return (
-    <Box>
+    <Box display="inline-block">
       <Box
         width="100%"
         height="6px"
@@ -17,9 +17,9 @@ const ContentLoader = () => {
         _after={{
           content: `" "`,
           position: 'absolute',
-          width: '96px',
+          width: '60px',
           height: '6px',
-          animation: `${ fade } 0.6s ease-in-out infinite alternate`,
+          animation: `${ runnerAnimation } 700ms ease-in-out infinite alternate`,
           left: '100%',
           top: 0,
           backgroundColor: useColorModeValue('blackAlpha.700', 'whiteAlpha.700'),