Add progress bar and progress calculation

src/Schedule.jsx

@@ -12,10 +12,11 @@ export default function Schedule({
         speakers,
         tracks,
         isLoading,
+        loadingProgress,
     } = useSchedule(conferenceId);
 
     return (<>
-        {isLoading && <p>Loading...</p>}
+        {isLoading && <p>Loading... <progress value={loadingProgress} /></p>}
         <div>schedule goes here</div>
         {tracks && Object.entries(tracks).map(([trackId, track]) => <div key={trackId} style={{
                 width: '100%',

src/hooks/useSchedule.js

@@ -4,6 +4,7 @@ import useTracks from './useTracks.js';
 import useEventTypes from './useEventTypes.js';
 import useHalls from './useHalls.js';
 import useSlots from './useSlots.js';
+import { calculateProgress } from '../utils.js';
 
 export default function useSchedule(conferenceId) {
     const {
@@ -42,8 +43,15 @@ export default function useSchedule(conferenceId) {
         isValidating: slotsValidating,
     } = useSlots(conferenceId);
 
-    const isLoading = eventsLoading || speakersLoading || tracksLoading || eventTypesLoading || hallsLoading || slotsLoading;
-    const isValidating = eventsValidating || speakersValidating || tracksValidating || eventTypesValidating || hallsValidating || slotsValidating;
+    const {
+        isStarted: isLoading,
+        remainingProgress: loadingProgress,
+    } = calculateProgress(eventsLoading, speakersLoading, tracksLoading, eventTypesLoading, hallsLoading, slotsLoading);
+    
+    const {
+        isStarted: isValidating,
+        remainingProgress: validatingProgress,
+    } = calculateProgress(eventsValidating, speakersValidating, tracksValidating, eventTypesValidating, hallsValidating, slotsValidating);
 
     return {
         events,
@@ -53,6 +61,8 @@ export default function useSchedule(conferenceId) {
         halls,
         slots,
         isLoading,
+        loadingProgress,
         isValidating,
+        validatingProgress,
     };
 }

src/utils.js

@@ -12,3 +12,36 @@ export const dateSorter = key => (a, b) => sorter(a, b, item => Date.parse(item[
 export const getSpeakerName = speaker => speaker.first_name.concat(' ').concat(speaker.last_name);
 
 export const isTrackHidden = track => track.name.en === 'Other' || track.name.bg === 'Други';
+
+export function calculateProgress(...elements) {
+    const totalCount = elements.length;
+
+    if (totalCount === 0) {
+        return {
+            totalCount,
+            completeCount: 0,
+            incompleteCount: 0,
+            progress: 1,
+            remainingProgress: 0,
+            isComplete: true,
+            isIncomplete: false,
+            isStarted: true,
+            isNotStarted: false,
+        };
+    }
+
+    const completeCount = elements.filter(element => !!element).length;
+    const progress = completeCount / totalCount;
+
+    return {
+        totalCount,
+        completeCount,
+        incompleteCount: totalCount - completeCount,
+        progress,
+        remainingProgress: 1 - progress,
+        isComplete: completeCount === totalCount,
+        isIncomplete: completeCount < totalCount,
+        isStarted: completeCount > 0,
+        isNotStarted: completeCount === 0,
+    };
+}