@@ -11,6 +11,7 @@ import { getBirthdays } from '../api/birthdayanniversary';
1111import { UPDATE_TOAST } from '../context/actions' ;
1212import SearchBirthdayAnniversaryResults from '../components/search-results/SearchBirthdayAnniversaryResults' ;
1313import { sortBirthdays } from '../context/util' ;
14+ import SkeletonLoader from '../components/skeleton_loader/SkeletonLoader' ;
1415
1516import {
1617 selectCsrfToken ,
@@ -43,6 +44,7 @@ const BirthdayReportPage = () => {
4344 const [ searchBirthdayResults , setSearchBirthdayResults ] = useState ( [ ] ) ;
4445 const [ selectedMonths , setSelectedMonths ] = useState ( defaultMonths ) ;
4546 const [ hasSearched , setHasSearched ] = useState ( false ) ;
47+ const [ loading , setLoading ] = useState ( false ) ;
4648
4749 useQueryParameters ( [
4850 {
@@ -57,9 +59,21 @@ const BirthdayReportPage = () => {
5759 ] ) ;
5860
5961 const handleSearch = async monthsToSearch => {
60- const birthdayResults = await getBirthdays ( monthsToSearch , csrf ) ;
61- setSearchBirthdayResults ( sortBirthdays ( birthdayResults ) ) ;
62- setHasSearched ( true ) ;
62+ setLoading ( true ) ;
63+ try {
64+ const birthdayResults = await getBirthdays ( monthsToSearch , csrf ) ;
65+ setSearchBirthdayResults ( sortBirthdays ( birthdayResults ) ) ;
66+ setHasSearched ( true ) ;
67+ } catch ( e ) {
68+ window . snackDispatch ( {
69+ type : UPDATE_TOAST ,
70+ payload : {
71+ severity : 'error' ,
72+ toast : e ,
73+ }
74+ } ) ;
75+ }
76+ setLoading ( false ) ;
6377 } ;
6478
6579 function onMonthChange ( event , newValue ) {
@@ -111,6 +125,10 @@ const BirthdayReportPage = () => {
111125 </ div >
112126 < div >
113127 {
128+ loading ?
129+ Array . from ( { length : 10 } ) . map ( ( _ , index ) => (
130+ < SkeletonLoader key = { index } type = "feedback_requests" />
131+ ) ) :
114132 < div className = "search-results" >
115133 < SearchBirthdayAnniversaryResults
116134 hasSearched = { hasSearched }
0 commit comments