🎨 updated progress bar

src/App.tsx

@@ -74,7 +74,7 @@ const App: React.FC<React.PropsWithChildren<unknown>> = () => {
           <Emoji emoji="📺" /> P
         </li>
       </ul>
-      <nav className="w-full flex flex-col fixed bottom-0 z-20 justify-around text-2xl lg:top-0 lg:bottom-auto select-none">
+      <nav className="w-full flex flex-col lg:flex-col-reverse fixed bottom-0 z-20 justify-around text-2xl lg:top-0 lg:bottom-auto select-none">
         <ProgressBar />
         <NavigationTabs logged={isLoggedIn} />
       </nav>

src/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,18 @@
+.animated-background {
+  background-size: 400%;
+
+  -webkit-animation: animation 3s ease infinite;
+  -moz-animation: animation 3s ease infinite;
+  animation: animation 3s ease infinite;
+}
+
+@keyframes animation {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+}

src/components/ProgressBar.tsx → src/components/ProgressBar/ProgressBar.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { useAppSelector } from 'state/store';
-import Emoji from './Emoji';
+import './ProgressBar.css';
 
 export const ProgressBar: React.FC<React.PropsWithChildren<unknown>> = () => {
   const shows = useAppSelector((state) => state.shows.totalRequestsPending);
   const movies = useAppSelector((state) => state.movies.totalRequestsPending);
 
   return movies + shows > 0 ? (
-    <div className="absolute right-0 flex justify-end text-sm pr-1">
-      <Emoji emoji="⏳" rotating={true} className="inline-block" />
-    </div>
+    <div className="h-1 w-full animated-background bg-gradient-to-r from-gray-200 via-black to-gray-200"></div>
   ) : (
     <></>
   );

src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar } from './ProgressBar';