LinearProgress

A simple wrapper around MUI LinearProgress that makes the component absolutely positioned. This means the component does not occupy any space in the flow, and content will not jump when it is rendered/removed.

See the MUI documentation for more information on how to use the component.

Example

import { LinearProgress } from "@olenbetong/appframe-mui";
import { useData, useLoading } from "@olenbetong/appframe-react";
import { List, ListItem, ListItemText } from "@mui/material";

function MyComponent() {
  let loading = useLoading(dsMyDataObject);
  let data = useData(dsMyDataObject);

  return (
    <>
      {loading && <LinearProgress />}
      <List>
        {data.map((record) => (
          <ListItem key={record.PrimKey}>
            <ListItemText
              primary={record.Title}
              secondary={record.Description}
            />
          </ListItem>
        ))}
      </List>
    </>
  );
}