У меня есть объект который по которому я иду циклом и пока контент не загрузится который я хочу отрендерить, должна висеть эта анимация.
Я начинающий, если не трудно, объясните как лучше это реализовать
Надеюсь корректно сформировал вопрос.
2 ответа
Вам дан ответ в разрезе классового компонента, здесь я опишу возможность использования функциональных компонентов + хуки
export function YourScreen(props) {
const [isLoading, setValueLoading] = useState(true);
const [posts, setPosts] = useState(null);
useEffect(() => {
// здесь пишется любая логика, которую необходимо выполнить один раз при загрузке
// запросы к API или слушатели.
// данный блок выполняется только после рендера, это значит, что сначала выполнится return в конце функции
// и только потом здесь будут происходить операции
// пример запроса к API
const getPosts = async () => {
try {
const resp = await fetch("https://anyUrl.com", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
const json = await resp.json();
return [resp.status, json];
} catch (error) {
console.error(error);
}
};
const status, response = getPosts();
if (status === 200) {
setPosts(response.posts)
}
},[])
useEffect(() => {
setValueLoading(false);
}, [posts])
return (
{isLoading ? <Mask /> : <ListPosts arr={posts}/>}
);
}
Код выше содержит только основную логику и некоторые пояснения. Далее по пунктам опишу как это работает:
- Используется два хука
useState()
,useEffect()
, кликабельно на русскую документацию. - При загрузке данного компонента по дефолту применяется два состояния
isLoading = true
posts = null
- Далее происходит рендер, при условии что
isLoading = true
и возвращается react компонент, который я назвалMask
и в моем коде это псевдо элемент, который подразумевает вашу картинку в вопросе. Реализация за вами. - После рендера начинает исполняться
useEffect()
хук с параметром - пустым массивом, см. комментарии в коде - Как только поменяется состояние для переменной
posts
, сразу исполнитсяuseEffect
, где указан параметр[posts]
- Изменятся состояние для
isLoading = false
и происходит ререндер где будет отрисовываться псевдо компонент дляListPosts
, тоже не реализован, это за вами
Что доделать:
- убрать функцию
getPosts()
в другое место, отдельный файлик может быть со всеми запросами к API, например - Релизовать функциональные компоненты
Mask
иListPosts
Примерно так
const PostsData = [
{
"category": "News",
"title": "CNN Acquire BEME",
"text": "CNN purchased Casey Neistat's Beme app for $25million."
},
{
"category": "Travel",
"title": "Nomad Lifestyle",
"text": "Learn our tips and tricks on living a nomadic lifestyle"
}
]
class App extends React.Component {
constructor() {
super();
this.state = {
posts: Array.from(Array(10).keys()),
loading: true
}
}
async componentWillMount() {
const posts = await this.fetchData();
this.setState({
posts: posts,
loading: false
});
}
fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(PostsData);
}, 3000);
});
}
render() {
return <div>
<header className="app-header"></header>
<div className="app-card-list" id="app-card-list">
{
Object
.keys(this.state.posts)
.map(key => {
return !this.state.loading ?
<Card key={key} index={key} details={this.state.posts[key]}/> :
<CardPreview />
})
}
</div>
</div>
}
}
Вам нужно отображать карточки пока идет загрузка. И, собственно, сам флаг loading, который будет хранить состояние процесса загрузки