From d15fb0a19bb5555faf1fdc7b172c4c0110214979 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Thu, 25 Jul 2024 14:34:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20fix=20loading=20screen?=
 =?UTF-8?q?=20not=20visually=20centered?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the loading word was sticked to top left without any padding
---
 src/frontend/src/layout/LoadingScreen.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/layout/LoadingScreen.tsx b/src/frontend/src/layout/LoadingScreen.tsx
index 2d58c9e4..eb2fee0b 100644
--- a/src/frontend/src/layout/LoadingScreen.tsx
+++ b/src/frontend/src/layout/LoadingScreen.tsx
@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BoxScreen } from './BoxScreen'
 import { Screen } from './Screen'
+import { VerticallyOffCenter } from '@/primitives'
+import { Center, Container } from '@/styled-system/jsx'
 
 export const LoadingScreen = ({
   asBox = false,
@@ -23,7 +25,11 @@ export const LoadingScreen = ({
   const Container = asBox ? BoxScreen : Screen
   return (
     <Container>
-      <p>{t('loading')}</p>
+      <VerticallyOffCenter>
+        <Center>
+          <p>{t('loading')}</p>
+        </Center>
+      </VerticallyOffCenter>
     </Container>
   )
 }