Loader in Spreadsheet

[Salokya]

Hello Team!
I want to implement loader in Spreadsheet. While I am fetching the data from backend, I want to render a loader with conditional rendering in React.js.
Problem - As data binding is done using ref, till the div is not loaded ref is undefined.

function Spreadsheet() {

    let spreadsheet;

    const [loader, setLoader] = useState(true);

    useEffect(() => {

        fetch('http://localhost:8080/api/v1/sheet/get', {

            method: 'POST',

            headers: {

                'Content-Type': 'application/json',

            },

            body: JSON.stringify({ Email: "[email protected]", Name: spreadsheet.sheets[0].name }),

        })

            .then((response) => response.json())

            .then((data) => {

                setLoader(false);

                spreadsheet.openFromJson({ file: data.JSONData });

            })

    }, [])

    return (

        <div className='spreadsheet'>

            {

                loader ?

                    <ComponentLoader />

                    :

                    <>

                        <Header title="Spreadsheet" />

                        <SpreadsheetComponent

                            ref={(scope) => { spreadsheet = scope }}

                            height="82%"

                            allowOpen={true}

                            openUrl='https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open'

                            allowSave={true}

                            saveUrl='https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'

                        >

                        </SpreadsheetComponent>

                    </>

            }

        </div >

    )

}

[Sangeetha Priya Murugan]

Hi Salokya,

We suspect that you need to render the loader in spreadsheet component till the data gets updated in the UI. And you are trying to access the spreadsheet object before the component getting initialized in the DOM. So, we suggest you load the excel file in the spreadsheet created event, in that event component getting initialized properly. So, please load the file in spreadsheet created event and kindly get back to us with the complete customization code with detailed description. If you are still getting the same issue or need any further assistance on this.

Reference KB: https://support.syncfusion.com/kb/article/10417/how-to-import-an-external-url-excel-file-while-initial-load-the-spreadsheet-component