Add animated page

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -9,7 +9,7 @@ import { MpvRequired } from '@/renderer/features/action-required/components/mpv-
 import { ServerCredentialRequired } from '@/renderer/features/action-required/components/server-credential-required';
 import { ServerRequired } from '@/renderer/features/action-required/components/server-required';
 import { settings } from '@/renderer/features/settings';
-import { useServerCredential } from '@/renderer/features/shared';
+import { AnimatedPage, useServerCredential } from '@/renderer/features/shared';
 import { AppRoute } from '@/renderer/router/routes';
 import { useAuthStore } from '@/renderer/store';
 
@@ -52,8 +52,8 @@ export const ActionRequiredRoute = () => {
   const displayedCheck = checks.find((c) => !c.valid);
 
   return (
-    <>
-      <Center sx={{ width: '100vw' }}>
+    <AnimatedPage>
+      <Center sx={{ height: '100%', width: '100vw' }}>
         <Stack spacing="xl" sx={{ maxWidth: '50%' }}>
           <Group noWrap>
             {displayedCheck && (
@@ -82,6 +82,6 @@ export const ActionRequiredRoute = () => {
           </Stack>
         </Stack>
       </Center>
-    </>
+    </AnimatedPage>
   );
 };

src/renderer/features/action-required/routes/invalid-route.tsx

@@ -2,23 +2,26 @@ import { Center, Group, Stack } from '@mantine/core';
 import { RiQuestionLine } from 'react-icons/ri';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Button, Text } from '@/renderer/components';
+import { AnimatedPage } from '@/renderer/features/shared';
 
 export const InvalidRoute = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
   return (
-    <Center sx={{ width: '100%' }}>
-      <Stack>
-        <Group noWrap position="center">
-          <RiQuestionLine color="var(--warning-color)" size={30} />
-          <Text size="xl">Page not found</Text>
-        </Group>
-        <Text>{location.pathname}</Text>
-        <Button variant="filled" onClick={() => navigate(-1)}>
-          Go back
-        </Button>
-      </Stack>
-    </Center>
+    <AnimatedPage>
+      <Center sx={{ height: '100%', width: '100%' }}>
+        <Stack>
+          <Group noWrap position="center">
+            <RiQuestionLine color="var(--warning-color)" size={30} />
+            <Text size="xl">Page not found</Text>
+          </Group>
+          <Text>{location.pathname}</Text>
+          <Button variant="filled" onClick={() => navigate(-1)}>
+            Go back
+          </Button>
+        </Stack>
+      </Center>
+    </AnimatedPage>
   );
 };