React JS Conditionally rendering animated lottie component on upload

Question

I'm trying to figure out how to conditionally render a loading animation on image upload using a AirBnB's lottie animation library: https://lottiefiles.com/

I've used various animations throughout the project without conditional rendering.

My original code works with a standard or operator using a placeholder URL image:

  render() {

    if (this.state.progress === 0) {
      return (
        <>
          <div>
            <progress value={this.state.progress} max="100" />
            <input type="file" onChange={this.handleChange} />
            <button onClick={this.handleUpload}>Upload</button>
          </div>
        </>
      )
    } else {
      return (
        <>
          <img src=this.state.url || 'http://via.placeholder.com/400x300' />
        </>
      )
    }
  }
}

Since that worked, I want to add an animated loading screen but so far it hasn't worked:

import LottieUpload from './animation/LottieUpload'
...
//same code as above
    } else {
      return (
        <>
          {(this.state.progress < 100) ?
            <LottieUpload />
            : <img className="responsive" src={this.state.url} alt="Uploaded images" />
          }
        </>
      )
    }

My goal is that if the image loading has not reached 100%, the animation will be displayed in the view. Any ideas on how to accomplish this would be helpful.

Answer 1

I found an easier way to do this. Instead of using the JSON file, Lotties also have a gif export option.

import loading from './animation/loading.gif
//omitted code
return (
        <>
          <img src={this.state.url || loading} alt="uploaded images" />
        </>
      )

Import the gif to the component and then use it after the or operator to show while the image is being uploaded.