refactor: update LoadingScreen component height across multiple pages for consistency

Author: kastov

src/pages/dashboard/hosts/ui/components/hosts.page.component.tsx

@@ -26,7 +26,7 @@ export default function HostsPageComponent(props: IProps) {
     return (
         <Page title={t('constants.hosts')}>
             {isHostsLoading || isConfigProfilesLoading || isHostTagsLoading || isNodesLoading ? (
-                <LoadingScreen height="60vh" />
+                <LoadingScreen />
             ) : (
                 <motion.div
                     animate={{ opacity: 1 }}

src/pages/dashboard/nodes-metrics/ui/components/nodes-metrics.page.component.tsx

@@ -18,7 +18,7 @@ export default function NodesMetricsPageComponent(props: IProps) {
                 title={t('constants.nodes-metrics')}
             />
 
-            {isLoading ? <LoadingScreen height="60vh" /> : <NodeMetricsWidget />}
+            {isLoading ? <LoadingScreen height="80vh" /> : <NodeMetricsWidget />}
 
             <EditNodeByUuidModalWidget />
         </Page>

src/pages/dashboard/users/ui/components/users.page.component.tsx

@@ -23,7 +23,7 @@ const DeferredUserTableWidget = () => {
     }, [])
 
     if (!shouldRender) {
-        return <LoadingScreen height="60vh" />
+        return <LoadingScreen height="80vh" />
     }
 
     return (

src/shared/ui/loading-screen/loading-screen.tsx

@@ -10,7 +10,7 @@ export function LoadingScreen({
     value?: number
 }) {
     return (
-        <Center h={height}>
+        <Center style={{ height: `calc(${height} - var(--app-shell-header-height) - 20px)` }}>
             <Stack align="center" gap="xs" w="100%">
                 {text && <Text size="lg">{text}</Text>}
                 <Progress

src/widgets/dashboard/nodes/linked-hosts-drawer/linked-hosts-drawer.widget.tsx

@@ -38,7 +38,7 @@ export const LinkedHostsDrawer = memo(() => {
                 size="500px"
                 title={t('linked-hosts-drawer.widget.assigned-hosts')}
             >
-                <LoadingScreen height="60vh" />
+                <LoadingScreen />
             </Drawer>
         )
     }