MUI loading snackbar for notistack

implementationExample.jsx

// imports...
// declarations...
// fc component things...

const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const initialSnackbarRef = useRef();
const mountedRef = useRef(true);

useEffect(() => {
      initialSnackbarRef.current = enqueueSnackbar('Loading...', {
        variant: 'default',
        persist: false,
        autoHideDuration: 1000,
        content: (key, message) => (
          <LoadingSnackbar id={key} message={message} />
        ),
      });
    return () => {
      mountedRef.current = false;
      closeSnackbar(initialSnackbarRef.current);
    };
  }, [somethingToWatch, enqueueSnackbar, closeSnackbar]);

// something...
// render...
// etc...

index.jsx

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import {
  StyledSnackbar,
  StyledSnackbarProgress,
  StyledSnackbarText,
} from './styles';

const LoadingSnackbar = forwardRef(({ id, message }, ref) => {
  return (
    <StyledSnackbar id={id} ref={ref}>
      <StyledSnackbarProgress />
      <StyledSnackbarText>{message}</StyledSnackbarText>
    </StyledSnackbar>
  );
});

LoadingSnackbar.propTypes = {
  id: PropTypes.number.isRequired,
  message: PropTypes.string.isRequired,
};

export default LoadingSnackbar;

styles.jsx

import styled from 'styled-components';
import { Paper, CircularProgress } from '@material-ui/core';

export const StyledSnackbar = styled(Paper)`
  && {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 14px 20px;
    background-color: ${({ theme }) =>
      theme.palette.type === 'dark' ? '#E8F3F8' : '#313131'};
    color: ${({ theme }) =>
      theme.palette.type === 'dark' ? '#1D2026' : '#E8F3F8'};
  }
`;

export const StyledSnackbarProgress = styled(CircularProgress)`
  && {
    width: 20px !important;
    height: 20px !important;
    & svg {
      color: ${({ theme }) =>
        theme.palette.type === 'dark' ? '#1D2026' : '#E8F3F8'};
      font-size: 20px;
    }
  }
`;

export const StyledSnackbarText = styled.span`
  && {
    flex-grow: 1;
    margin-left: 8px;
  }
`;

Example: