Skip to content

Commit

Permalink
Add loading state for findings index
Browse files Browse the repository at this point in the history
  • Loading branch information
@majakomel
majakomel committed Nov 29, 2023
1 parent 039a48a commit 5671f09
Showing 1 changed file with 34 additions and 28 deletions.
62 changes: 34 additions & 28 deletions pages/findings/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Head from 'next/head'
import NavBar from 'components/NavBar'
import { Container, Heading, Box, Flex, Input, Select, Button, Text } from 'ooni-components'
import { StyledStickyNavBar, StyledStickySubMenu } from 'components/SharedStyledComponents'
import SpinLoader from 'components/vendor/SpinLoader'
import useFilterWithSort from 'hooks/useFilterWithSort'
import useSWR from 'swr'
import { apiEndpoints, fetcher } from '/lib/api'
Expand Down Expand Up @@ -30,7 +31,7 @@ const Index = () => {
const intl = useIntl()
const { user } = useUser()

const { data, error } = useSWR(apiEndpoints.SEARCH_INCIDENTS, fetcher)
const { data, isLoading, error } = useSWR(apiEndpoints.SEARCH_INCIDENTS, fetcher)

const {
searchValue,
Expand Down Expand Up @@ -118,33 +119,38 @@ const Index = () => {
</Flex>
</Flex>
</StyledStickySubMenu>
<StyledGrid mt={4}>
{sortedAndFilteredData.map((incident) => (
<HighlightBox
key={incident.id}
countryCode={incident.CCs[0]}
title={incident.title}
text={incident.short_description}
dates={
<>
<Text color="gray6" mb={2}>
{incident.start_time && formatLongDate(incident.start_time, intl.locale)} - {incident.end_time ? formatLongDate(incident.end_time, intl.locale) : 'ongoing'}
</Text>
<Text color="gray6">
{intl.formatMessage({id: 'Findings.Index.HighLightBox.CreatedOn'}, {date: incident?.create_time && formatLongDate(incident?.create_time, intl.locale)})}
</Text>
</>
}
footer={
<Box textAlign="center" mt={2}>
<NLink href={`/findings/${incident.id}`}>
<Button size="small" hollow>{intl.formatMessage({id: 'Findings.Index.HighLightBox.ReadMore'})}</Button>
</NLink>
</Box>
}
/>
))}
</StyledGrid>
{isLoading &&
<Container pt={6}><SpinLoader /></Container>
}
{!!sortedAndFilteredData?.length &&
<StyledGrid mt={4}>
{sortedAndFilteredData.map((incident) => (
<HighlightBox
key={incident.id}
countryCode={incident.CCs[0]}
title={incident.title}
text={incident.short_description}
dates={
<>
<Text color="gray6" mb={2}>
{incident.start_time && formatLongDate(incident.start_time, intl.locale)} - {incident.end_time ? formatLongDate(incident.end_time, intl.locale) : 'ongoing'}
</Text>
<Text color="gray6">
{intl.formatMessage({id: 'Findings.Index.HighLightBox.CreatedOn'}, {date: incident?.create_time && formatLongDate(incident?.create_time, intl.locale)})}
</Text>
</>
}
footer={
<Box textAlign="center" mt={2}>
<NLink href={`/findings/${incident.id}`}>
<Button size="small" hollow>{intl.formatMessage({id: 'Findings.Index.HighLightBox.ReadMore'})}</Button>
</NLink>
</Box>
}
/>
))}
</StyledGrid>
}
</Container>
</>
)
Expand Down

1 comment on commit 5671f09

@vercel
Copy link

@vercel vercel bot commented on 5671f09 Nov 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

explorer – ./

explorer-one.vercel.app
explorer-git-master-ooni1.vercel.app
explorer.test.ooni.org
explorer-ooni1.vercel.app

Please sign in to comment.