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?

Hunkoys · Accepted Answer · 2021-08-19 18:32:29Z

0

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 /> }

answered Aug 19, 2021 at 18:32

Hunkoys

2702 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related