FullCalendar - React - loading function problem

user_12383768 0
Viewed 932

I'm using FullCalander v5 for React, testing the Resource Timeline view. I'm encountering a problem with the "loading" function, the intent is to check the Fullcalendar state and in case of loading state true, display a Spinner type component (with a conditional render) instead of the Timeline, setting the Spinner component state to true with a useState. The problem is that, launching a useState from the Fullcalendar component, which is inside the render method, starts an infinite render loop. Any ideas to break the flow ?

 
 // Loading function in the container component of Fullcalendar an the useState method
 
 const [spinner, setSpinner] = useState(true);
 
 let loadingFunction = (isLoading) => {
   if (isLoading) {
     console.log("loading");
  
  setSpinner(true);
} else {
    console.log("idle");
     
setSpinner(false);
   }
 };


//  The conditional render

return (
    <>
      {spinner ? (
        <Spinner />
      ) : (
        <>
          
         <FullCalendar
         loading={loadingFunction}
         ref={calendarRef}        
         dateClick={handleEventCreate}         
         .....

fullcalendar-5 reactjs fullcalendar css html
1 Answers

Went into the same. My solutions, (hack?) is following. Instead of letting a state variable rule the rendering of the spinner, add a css class that take it off screen. Then I took a ref to the spinner and during the loading phase in FullCalendar I call a method that removed the off-screen class, then add it again when the loading phase is over.

    /**
    * @type {{current: HTMLElement}}
    */
    const ripple = useRef(null);

    const toggleSpinner = useCallback((state) => {
        if (ripple.current) {
            if (state) {
                ripple.current.classList.remove("off-screen");
            }
            else {
                ripple.current.classList.add("off-screen");
            }
        }
    }, [ripple]);

    /*...*/

    return <>
        <div ref={ripple} className="off-screen spinner"></div>
        <FullCalendar
            loading={s => toggleSpinner(s)}

        />

    </>

All the best Staffan

user_5748200
Related