Use loading placeholders for your components or pages to indicate something may still be loading.
import Placeholder from 'react-bootstrap/Placeholder'
{/* Width via col-* attribute */}
<Placeholder xs={6} />
{/* Width via w-* class */}
<Placeholder className='w-75' />
{/* Width via style attribute */}
<Placeholder style={{ width: '33%' }} />
import Placeholder from 'react-bootstrap/Placeholder'
{/* Default */}
<Placeholder xs={12} />
{/* Primary */}
<Placeholder xs={12} bg='primary' />
{/* Accent */}
<Placeholder xs={12} bg='accent' />
{/* Success */}
<Placeholder xs={12} bg='success' />
{/* Danger */}
<Placeholder xs={12} bg='danger' />
{/* Warning */}
<Placeholder xs={12} bg='warning' />
{/* Info */}
<Placeholder xs={12} bg='info' />
{/* Light */}
<Placeholder xs={12} bg='light' />
{/* Dark */}
<Placeholder xs={12} bg='dark' />
import Placeholder from 'react-bootstrap/Placeholder'
{/* Large */}
<Placeholder xs={12} size='lg' />
{/* Default */}
<Placeholder xs={12} />
{/* Small */}
<Placeholder xs={12} size='sm' />
{/* Extra small */}
<Placeholder xs={12} size='xs' />
import Placeholder from 'react-bootstrap/Placeholder'
{/* Glow animation */}
<Placeholder as='p' animation='glow'>
<Placeholder xs={12} />
</Placeholder>
{/* Wave animation */}
<Placeholder as='p' animation='wave'>
<Placeholder xs={12} />
</Placeholder>
import Card from 'react-bootstrap/Card'
import Placeholder from 'react-bootstrap/Placeholder'
{/* Loading card placeholder example */}
<Card className='border-0 shadow'>
<Placeholder as='div' animation='wave' className='position-relative'>
<Placeholder as='div' className='card-img-top ratio ratio-16x9' />
<i className='fi-image position-absolute top-50 start-50 translate-middle fs-1 opacity-40'></i>
</Placeholder>
<Card.Body>
<Placeholder as='h5' animation='glow' className='card-title'>
<Placeholder xs={6} />
</Placeholder>
<Placeholder as='p' animation='glow' className='card-text'>
<Placeholder size='sm' xs={7} className='me-2' />
<Placeholder size='sm' xs={4} />
<Placeholder size='sm' xs={4} className='me-2' />
<Placeholder size='sm' xs={6} />
<Placeholder size='sm' xs={8} />
</Placeholder>
<Placeholder.Button xs={6} aria-hidden='true' className='placeholder-wave' />
</Card.Body>
</Card>