jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: add loading state for LiveSessionReloadButton.tsx

Browse source
This commit is contained in:
nick-delirium 2025-03-18 15:30:24 +01:00
parent 8009882cef
commit 7eace68de6
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
View file

@ -98,7 +98,7 @@ function LiveSessionList() {
<div> <div>
<div className="bg-white py-3 rounded-lg border shadow-sm"> <div className="bg-white py-3 rounded-lg border shadow-sm">
<div className="flex mb-4 pb-2 px-3 justify-between items-center border-b border-b-gray-lighter"> <div className="flex mb-4 pb-2 px-3 justify-between items-center border-b border-b-gray-lighter">
<LiveSessionReloadButton onClick={refetch} /> <LiveSessionReloadButton />
<div className="flex items-center"> <div className="flex items-center">
<div className="flex items-center ml-6"> <div className="flex items-center ml-6">
<span className="mr-2 color-gray-medium">{t('Sort By')}</span> <span className="mr-2 color-gray-medium">{t('Sort By')}</span>

12
frontend/app/components/shared/LiveSessionReloadButton/LiveSessionReloadButton.tsx
View file

@ -4,15 +4,11 @@ import { observer } from 'mobx-react-lite';
import ReloadButton from '../ReloadButton'; import ReloadButton from '../ReloadButton';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
interface Props { function LiveSessionReloadButton() {
onClick: () => void;
}
function LiveSessionReloadButton(props: Props) {
const { t } = useTranslation(); const { t } = useTranslation();
const { sessionStore } = useStore(); const { searchStoreLive } = useStore();
const { onClick } = props; const onClick = searchStoreLive.fetchSessions
const loading = sessionStore.loadingLiveSessions; const loading = searchStoreLive.loading;
return ( return (
<ReloadButton label={t('Refresh')} buttonSize={'small'} iconSize={14} loading={loading} onClick={onClick} className="cursor-pointer" /> <ReloadButton label={t('Refresh')} buttonSize={'small'} iconSize={14} loading={loading} onClick={onClick} className="cursor-pointer" />
); );

1
frontend/app/components/shared/ReloadButton/ReloadButton.tsx
View file

@ -18,6 +18,7 @@ export default function ReloadButton(props: Props) {
<Button <Button
type="default" type="default"
size={buttonSize} size={buttonSize}
loading={loading}
onClick={onClick} onClick={onClick}
icon={<SyncOutlined style={{ fontSize: iconSize }} />} icon={<SyncOutlined style={{ fontSize: iconSize }} />}
> >

23
frontend/app/mstore/searchStoreLive.ts
View file

@ -75,6 +75,8 @@ class SearchStoreLive {
loadingFilterSearch = false; loadingFilterSearch = false;
loading = false;
constructor() { constructor() {
makeAutoObservable(this); makeAutoObservable(this);
@ -242,11 +244,22 @@ class SearchStoreLive {
}); });
}; };
async fetchSessions() { setLoading = (val: boolean) => {
await sessionStore.fetchLiveSessions({ this.loading = val;
...this.instance.toSearch(), }
page: this.currentPage,
}); fetchSessions = async () => {
this.setLoading(true)
try {
await sessionStore.fetchLiveSessions({
...this.instance.toSearch(),
page: this.currentPage,
});
} catch (e) {
console.error('Error fetching sessions:', e);
} finally {
this.setLoading(false)
}
} }
} }