1  import { Box, CircularProgress } from '@mui/material';
 2  import React, { ReactNode } from 'react';
 3  import {
 4    ExtendedFormattedUser,
 5    useAppDataContext,
 6  } from 'src/hooks/app-data-provider/useAppDataProvider';
 7  import invariant from 'tiny-invariant';
 8  
 9  interface UserAuthenticatedProps {
10    children: (user: ExtendedFormattedUser) => ReactNode;
11  }
12  
13  export const UserAuthenticated = ({ children }: UserAuthenticatedProps) => {
14    const { user, loading } = useAppDataContext();
15    if (loading) {
16      return (
17        <Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
18          <CircularProgress />
19        </Box>
20      );
21    }
22    invariant(user, 'User data loaded but no user found');
23    return <>{children(user)}</>;
24  };