fix(web): remove center flag and make it default behavior

Author: alcercu

web/src/app.tsx

@@ -36,55 +36,55 @@ const App: React.FC = () => {
                     <Route
                       index
                       element={
-                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
                           <Home />
                         </Suspense>
                       }
                     />
                     <Route
                       path="cases/*"
                       element={
-                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
                           <Cases />
                         </Suspense>
                       }
                     />
                     <Route
                       path="courts/*"
                       element={
-                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
                           <Courts />
                         </Suspense>
                       }
                     />
                     <Route
                       path="dashboard/:page/:order/:filter"
                       element={
-                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
                           <Dashboard />
                         </Suspense>
                       }
                     />
                     <Route
                       path="dispute-template"
                       element={
-                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
                           <DisputeTemplateView />
                         </Suspense>
                       }
                     />
                     <Route
                       path="resolver/*"
                       element={
-                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
                           <DisputeResolver />
                         </Suspense>
                       }
                     />
                     <Route
                       path="get-pnk/*"
                       element={
-                        <Suspense fallback={<Loader width={"48px"} height={"48px"} center />}>
+                        <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
                           <GetPnk />
                         </Suspense>
                       }

web/src/components/Loader.tsx

@@ -27,22 +27,21 @@ const StyledKlerosIcon = styled(KlerosIcon)`
   animation: ${breathing} 2s ease-out infinite normal;
 `;
 
-const Container = styled.div<{ width?: Width; height?: Height; center?: boolean }>`
+const Container = styled.div<{ width?: Width; height?: Height }>`
+  margin: auto;
   width: ${({ width }) => width ?? "100%"};
   height: ${({ height }) => height ?? "100%"};
-  margin: ${({ center }) => center ? "auto" : "initial"};
 `;
 
 interface ILoader {
   width?: Width;
   height?: Height;
-  center?: boolean;
   className?: string;
 }
 
-const Loader: React.FC<ILoader> = ({ width, height, center, className }) => {
+const Loader: React.FC<ILoader> = ({ width, height, className }) => {
   return (
-    <Container {...{ width, height, center, className }}>
+    <Container {...{ width, height, className }}>
       <StyledKlerosIcon />
     </Container>
   );