Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

chore: create skeleton loading for new event screen (#7861)

Browse Source 
Updates the new event log to show a skeleton loading screen while the
search results are being fetched.

The placeholder size is based on the standard event size.


![image](https://github.com/user-attachments/assets/fce51445-2b73-40dd-9452-29a415ec278a)
This commit is contained in:
Thomas Heartman 2024-08-13 15:18:47 +02:00 committed by GitHub
parent f2b7e0278d
commit 9f0fd7e200
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/component/events/EventLog/EventLog.tsx
View File

@ -18,6 +18,7 @@ import type { EventSchema } from 'openapi';
import { useEventLogSearch } from './useEventLogSearch'; import { useEventLogSearch } from './useEventLogSearch';
import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar'; import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar';
import { EventActions } from './EventActions'; import { EventActions } from './EventActions';
import useLoading from 'hooks/useLoading';
interface IEventLogProps { interface IEventLogProps {
title: string; title: string;
@ -44,6 +45,12 @@ const EventResultWrapper = styled('div')(({ theme }) => ({
gap: theme.spacing(1), gap: theme.spacing(1),
})); }));
const Placeholder = styled('li')({
height: '246px',
borderRadius: theme.shape.borderRadiusLarge,
'&[data-loading-events=true]': { zIndex: '1' }, // .skeleton has z-index: 9990
});
const NewEventLog = ({ title, project, feature }: IEventLogProps) => { const NewEventLog = ({ title, project, feature }: IEventLogProps) => {
const { const {
events, events,
@ -60,6 +67,7 @@ const NewEventLog = ({ title, project, feature }: IEventLogProps) => {
? { type: 'flag', flagName: feature } ? { type: 'flag', flagName: feature }
: { type: 'global' }, : { type: 'global' },
); );
const ref = useLoading(loading, '[data-loading-events=true]');
const setSearchValue = (query = '') => { const setSearchValue = (query = '') => {
setTableState({ query }); setTableState({ query });
@ -94,7 +102,16 @@ const NewEventLog = ({ title, project, feature }: IEventLogProps) => {
const resultComponent = () => { const resultComponent = () => {
if (loading) { if (loading) {
return <p>Loading...</p>; return (
<StyledEventsList>
{Array.from({ length: pagination.pageSize }).map((_, i) => (
<Placeholder
data-loading-events='true'
key={`event-skeleton-${i}`}
/>
))}
</StyledEventsList>
);
} else if (events.length === 0) { } else if (events.length === 0) {
return <p>No events found.</p>; return <p>No events found.</p>;
} else { } else {
@ -104,8 +121,8 @@ const NewEventLog = ({ title, project, feature }: IEventLogProps) => {
<ConditionallyRender <ConditionallyRender
key={entry.id} key={entry.id}
condition={eventSettings.showData} condition={eventSettings.showData}
show={() => <EventJson entry={entry} />} show={<EventJson entry={entry} />}
elseShow={() => <EventCard entry={entry} />} elseShow={<EventCard entry={entry} />}
/> />
))} ))}
</StyledEventsList> </StyledEventsList>
@ -131,7 +148,7 @@ const NewEventLog = ({ title, project, feature }: IEventLogProps) => {
</PageHeader> </PageHeader>
} }
> >
<EventResultWrapper> <EventResultWrapper ref={ref}>
<StyledFilters <StyledFilters
logType={project ? 'project' : feature ? 'flag' : 'global'} logType={project ? 'project' : feature ? 'flag' : 'global'}
state={filterState} state={filterState}