How to add react-spring animation component to React lazy loading?

Question

I try use React lazy and Suspense loading. I have simple login page and animation page for lazy loading. But if I refresh or open this page I cant see animation. But when write fallback = <p> Loading... </p> like this it is work. How to do I do this with animaition?
This is my main page for lazy loading:

import { lazy, Suspense } from "react";
import Login_Register from "../Loadingsss/login-register";
const Example = lazy(()=>import ('./Login'));
function Login(){
 return (
 <Suspense fallback={ Login_Register }>
 <Example />
 </Suspense>
 );
}
export default Login;

and this animation page:

import { useState } from 'react';
import {animated, useSpring} from 'react-spring';
function Login_Register(){
 const [toogle, setToggle] = useState(true);
 const props = useSpring({
 width: toogle===true ?'22rem':'0rem',
 backgroundColor: toogle ? '#ccc' : 'rgb(175, 175, 175)',
 height: '100%',
 borderRadius: '10px'
 });
 setInterval( ()=>{
 setToggle(!toogle);
 },1000 );
 
 return (<div className="loading">
 <div className="row">
 <animated.div style = {props.backgroundColor} className="circle"></animated.div>
 <animated.div style={props} className="rectangle"></animated.div>
 </div>
 <div className="row">
 <animated.div style = {props.backgroundColor} className="circle"></animated.div>
 <animated.div style={props} className="rectangle"></animated.div>
 </div>
 <div className="row">
 <animated.div style = {props.backgroundColor} className="circle"></animated.div>
 <animated.div style={props} className="rectangle"></animated.div>
 </div>
 <div className="row">
 <animated.div style = {props.backgroundColor} className="circle"></animated.div>
 <animated.div style={props} className="rectangle"></animated.div>
 </div>
 <div className="row">
 <animated.div style = {props.backgroundColor} className="circle"></animated.div>
 <animated.div style={props} className="rectangle"></animated.div>
 </div>
 
 
 </div>);
}
export default Login_Register;

How can I do this like upwork load animation?

Answer 1

You need to pass a React Element into fallback, not a Component. Surround Login_Register with < and /> to turn that Component into an Element. like this:

fallback={ <Login_Register /> }