github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-14 20:40:17 -05:00
Code Issues Projects Releases Packages Wiki Activity

Update loading spinner in Chat (#21624)

Browse source 
GitOrigin-RevId: 6af510b7e229249dd5192ceba2ec88e95339cab5
This commit is contained in:
Antoine Clausse 2024-11-08 10:39:51 +01:00 committed by Copybot
parent b257625f07
commit 455fbd8cc3
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
services/web/frontend/js/features/chat/components/chat-pane.tsx
View file

@ -10,13 +10,17 @@ import { useUserContext } from '../../../shared/context/user-context'
import withErrorBoundary from '../../../infrastructure/error-boundary' import withErrorBoundary from '../../../infrastructure/error-boundary'
import { FetchError } from '../../../infrastructure/fetch-json' import { FetchError } from '../../../infrastructure/fetch-json'
import { useChatContext } from '../context/chat-context' import { useChatContext } from '../context/chat-context'
import LoadingSpinner from '../../../shared/components/loading-spinner' import { FullSizeLoadingSpinner } from '../../../shared/components/loading-spinner'
import { bsVersion } from '@/features/utils/bootstrap-5' import { bsVersion } from '@/features/utils/bootstrap-5'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon' import MaterialIcon from '@/shared/components/material-icon'
const MessageList = lazy(() => import('./message-list')) const MessageList = lazy(() => import('./message-list'))
const Loading = () => (
<FullSizeLoadingSpinner delay={500} className={bsVersion({ bs5: 'pt-4' })} />
)
const ChatPane = React.memo(function ChatPane() { const ChatPane = React.memo(function ChatPane() {
const { t } = useTranslation() const { t } = useTranslation()
@ -85,8 +89,8 @@ const ChatPane = React.memo(function ChatPane() {
<h2 className={bsVersion({ bs3: 'sr-only', bs5: 'visually-hidden' })}> <h2 className={bsVersion({ bs3: 'sr-only', bs5: 'visually-hidden' })}>
{t('chat')} {t('chat')}
</h2> </h2>
<Suspense fallback={<LoadingSpinner delay={500} />}> <Suspense fallback={<Loading />}>
{status === 'pending' && <LoadingSpinner delay={500} />} {status === 'pending' && <Loading />}
{shouldDisplayPlaceholder && <Placeholder />} {shouldDisplayPlaceholder && <Placeholder />}
<MessageList <MessageList
messages={messages} messages={messages}

7
services/web/frontend/js/shared/components/loading-spinner.tsx
View file

@ -58,14 +58,19 @@ export function FullSizeLoadingSpinner({
minHeight, minHeight,
loadingText, loadingText,
size = 'sm', size = 'sm',
className,
}: { }: {
delay?: 0 | 500 delay?: 0 | 500
minHeight?: string minHeight?: string
loadingText?: string loadingText?: string
size?: OLSpinnerSize size?: OLSpinnerSize
className?: string
}) { }) {
return ( return (
<div className="full-size-loading-spinner-container" style={{ minHeight }}> <div
className={classNames('full-size-loading-spinner-container', className)}
style={{ minHeight }}
>
<LoadingSpinner size={size} loadingText={loadingText} delay={delay} /> <LoadingSpinner size={size} loadingText={loadingText} delay={delay} />
</div> </div>
) )