codekingpro/portable-devtools

1/////////////////////////////////////////////////////////////2//3// pgAdmin 4 - PostgreSQL Tools4//5// Copyright (C) 2013 - 2024, The pgAdmin Development Team6// This software is released under the PostgreSQL Licence7//8//////////////////////////////////////////////////////////////9 10import { CircularProgress, Box, Typography } from '@mui/material';11import { makeStyles } from '@mui/styles';12import React from 'react';13import PropTypes from 'prop-types';14 15const useStyles = makeStyles((theme)=>({16  root: {17    position: 'absolute',18    top: 0,19    bottom: 0,20    left: 0,21    right: 0,22    backgroundColor: theme.otherVars.loader.backgroundColor,23    color: theme.otherVars.loader.color,24    zIndex: 1000,25    display: 'flex',26  },27  loaderRoot: {28    color: theme.otherVars.loader.color,29    display: 'flex',30    alignItems: 'center',31    margin: 'auto',32    '.MuiTypography-root': {33      marginLeft: theme.spacing(1),34    }35  },36  loader: {37    color: theme.otherVars.loader.color,38  },39  message: {40    marginLeft: '0.5rem',41    fontSize: '16px',42  }43}));44 45export default function Loader({message, style, autoEllipsis=false, ...props}) {46  const classes = useStyles();47  if(!message) {48    return <></>;49  }50  return (51    <Box className={classes.root} style={style} data-label="loader" {...props}>52      <Box className={classes.loaderRoot}>53        <CircularProgress className={classes.loader} />54        <Typography className={classes.message}>{message}{autoEllipsis ? '...':''}</Typography>55      </Box>56    </Box>57  );58}59 60Loader.propTypes = {61  message: PropTypes.string,62  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),63  autoEllipsis: PropTypes.bool,64};65