Greetings everyone! I seek assistance with a React Application that I am currently developing. As a newcomer to the Javascript world, I apologize if my inquiry seems trivial.
The application comprises of two main elements: a loader, implemented as a React component, and the app content, initially hidden from view.
The loader, simply an HTML and CSS animation, runs a task asynchronously. Once the task is complete, it transitions out by adding a specific class. Despite being hidden, the loader persists in taking up space due to its separate React Component nature.
My objective is simple - I want the loader to vanish completely once its task concludes, relinquishing its invisible hold on space. Simultaneously, the app content should be revealed upon the loader's completion. This seemingly straightforward task has me stumped.
How can I achieve this desired outcome? Any guidance would be greatly appreciated. Thank you kindly for your support.
Sneak Peek at My Code
App Component
function App() {
componentDidMount() {
Secure()
}
return (
<div className="App">
<header className="App-header">
<Loader task={test()}/>
<div className="App-content">
<h1>Welcome to GitChain</h1>
</div>
</header>
</div>
);
}
Loader component
class Loader extends React.Component {
constructor(props) {
super(props);
this.state = { loading: true };
}
componentDidMount(callback) {
;(async () => {
await this.props.task
this.setState({ loading: false });
})();
}
render() {
return (
<div className={this.state.loading ? "sk-folding-cube" : "sk-folding-cube completed"}>
<div className="sk-cube1 sk-cube"></div>
<div className="sk-cube2 sk-cube"></div>
<div className="sk-cube4 sk-cube"></div>
<div className="sk-cube3 sk-cube"></div>
</div>
);
}
}
App.css
.App {
text-align: center;
font-family: -apple-system, BlinkMacSystemFont;
font-weight: bold;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #060606;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.App-content {
opacity: 0;
}