Hook for loading the schedule

src/Schedule.jsx

@@ -1,52 +1,46 @@
 import PropTypes from 'prop-types';
-import useEvents from './hooks/useEvents.js';
-import useSpeakers from './hooks/useSpeakers.js';
-import useTracks from './hooks/useTracks.js';
-import useEventTypes from './hooks/useEventTypes.js';
-import useHalls from './hooks/useHalls.js';
-import useSlots from './hooks/useSlots.js';
+import useSchedule from './hooks/useSchedule.js';
 
 export default function Schedule({
     conferenceId,
 }) {
     const {
-        data: events,
-    } = useEvents(conferenceId);
-
-    const {
-        data: speakers,
-    } = useSpeakers(conferenceId);
-
-    const {
-        data: tracks,
-    } = useTracks(conferenceId);
-
-    const {
-        data: eventTypes,
-    } = useEventTypes(conferenceId);
-
-    const {
-        data: halls,
-    } = useHalls(conferenceId);
-
-    const {
-        data: slots,
-    } = useSlots(conferenceId);
+        events,
+        speakers,
+        tracks,
+        eventTypes,
+        halls,
+        slots,
+        isLoading,
+    } = useSchedule(conferenceId);
 
     return (<>
         <div>conference id: {conferenceId}</div>
-        <div>events:</div>
-        <div>{JSON.stringify(events)}</div>
-        <div>speakers:</div>
-        <div>{JSON.stringify(speakers)}</div>
-        <div>tracks:</div>
-        <div>{JSON.stringify(tracks)}</div>
-        <div>event types:</div>
-        <div>{JSON.stringify(eventTypes)}</div>
-        <div>halls:</div>
-        <div>{JSON.stringify(halls)}</div>
-        <div>slots:</div>
-        <div>{JSON.stringify(slots)}</div>
+        {isLoading && <p>Loading...</p>}
+        {events && <>
+            <div>events:</div>
+            <div>{JSON.stringify(events)}</div>
+        </>}
+        {speakers && <>
+            <div>speakers:</div>
+            <div>{JSON.stringify(speakers)}</div>
+        </>}
+        {tracks && <>
+            <div>tracks:</div>
+            <div>{JSON.stringify(tracks)}</div>
+        </>}
+        {eventTypes && <>
+            <div>event types:</div>
+            <div>{JSON.stringify(eventTypes)}</div>
+        </>}
+        {halls && <>
+            <div>halls:</div>
+            <div>{JSON.stringify(halls)}</div>
+        </>}
+        {slots && <>
+            <div>slots:</div>
+            <div>{JSON.stringify(slots)}</div>
+        </>}
     </>);
 }
 

src/hooks/useSchedule.js

@@ -0,0 +1,58 @@
+import useEvents from './useEvents.js';
+import useSpeakers from './useSpeakers.js';
+import useTracks from './useTracks.js';
+import useEventTypes from './useEventTypes.js';
+import useHalls from './useHalls.js';
+import useSlots from './useSlots.js';
+
+export default function useSchedule(conferenceId) {
+    const {
+        data: events,
+        isLoading: eventsLoading,
+        isValidating: eventsValidating,
+    } = useEvents(conferenceId);
+
+    const {
+        data: speakers,
+        isLoading: speakersLoading,
+        isValidating: speakersValidating,
+    } = useSpeakers(conferenceId);
+
+    const {
+        data: tracks,
+        isLoading: tracksLoading,
+        isValidating: tracksValidating,
+    } = useTracks(conferenceId);
+
+    const {
+        data: eventTypes,
+        isLoading: eventTypesLoading,
+        isValidating: eventTypesValidating,
+    } = useEventTypes(conferenceId);
+
+    const {
+        data: halls,
+        isLoading: hallsLoading,
+        isValidating: hallsValidating,
+    } = useHalls(conferenceId);
+
+    const {
+        data: slots,
+        isLoading: slotsLoading,
+        isValidating: slotsValidating,
+    } = useSlots(conferenceId);
+
+    const isLoading = eventsLoading || speakersLoading || tracksLoading || eventTypesLoading || hallsLoading || slotsLoading;
+    const isValidating = eventsValidating || speakersValidating || tracksValidating || eventTypesValidating || hallsValidating || slotsValidating;
+
+    return {
+        events,
+        speakers,
+        tracks,
+        eventTypes,
+        halls,
+        slots,
+        isLoading,
+        isValidating,
+    };
+}