Data with loader

Loading#

When loading is "true" it shows spinner or loading content, and when it's "false" it shows data.

<>
	<DataWithLoader data="This is data" loading objective />
</>

<>
	<DataWithLoader data="This is data" loading loadingContent="Loading..." />
</>

This is data

<>
	<DataWithLoader data="This is data" loading={false} />
</>

Count#

When count is "0" it shows empty content or empty state.

Empty content#

This is empty content

<>
	<DataWithLoader data="This is data" loading={false} emptyContent="This is empty content"  count={0} />
</>

Empty state#

Icon#

You can costumize the empty state by giving text (with emptyText), icon (with emptyIcon). And also change the icon size with size prop.

Empty state

<>
	<DataWithLoader data="This is data" loading={false} emptyText="Empty state" emptyIcon="info-circle" count={0} size="small" />
</>

Image#

You can costumize the empty state by giving text (with emptyText), image (with emptyImage).

Empty state

<>
	<DataWithLoader data="This is data" loading={false} emptyText="Empty state" emptyImage="https://erxes.io/static/images/logo/logo_dark.svg" count={0} />
</>

API#

import DataWithLoader from "erxes-ui/lib/components/DataWithLoader";

* required prop

Name	Type	Default	Description
data*	any		Define data
count	any		Define count
loading*	boolean		Loading state
emptyText	string	There is no data	Define text of emptyState
emptyIcon	string		Define icon of emptyState
emptyImage	string		Define image of emptyState
size	string	full	Define size of icon in emptyState
objective	boolean	false	Make the spinner objective
emptyContent	React.ReactNode		Define content when count is "0"
loadingContent	React.ReactNode		Define content when loading is "true"