Content inside html elements are rendered with a delay - ReactJS - html

Question

I am learning ReactJS by creating ReactJS version of my blog. While I was testing google page speed, I am noticed the "prioritize visible content", fine, while articles are loading I have added a placeholder article with title of a loading message and lorem ipsum description and a sample default header image. I have run the page speed again, still the same issue with one difference. The placeholder article is rendered, but the title, image and description are not rendered. It is a static text, cannot imagine why it´s not showing. I have tried to simulate low internet connection and reload the page and yes, the text inside component is rendered with some delay, even its just static text.
The code is available here: https://github.com/erikkubica/reactjs-simple-blog-test See the src/modules/article/ArticleListItemPlaceholder.js and ArticleList.js
I have also noticed that the logo is also missing at this moment. Cannot imagine why, if on non-react website it´s not. Also the styles are loaded, navigation component is rendered...
See in action http://reactjs.netlime.eu/
Screenshot about the problem:
Thank you, I will be happy to get any explanation, good practices,... to learn more.
UPDATE:
Problem resolved.
Problem was that while custom fonts was not loaded browser made the text invisible. I have added fontFamily: "Arial" into inline style of elements which fixed the issue. Thanks to Mr Lister.
Also big thanks to John Ruddell for giving some best practice.

Answer 1

Your issue is you are setting state async but trying to render things in a semi sync manner.
async fetchData() {
//const response = await fetch("/static/articles.json");
let data = null; //await AsyncStorage.getItem('#MySuperStore:articles_storage_' + this.state.category);
if (data === null) {
const response = await fetch("https://www.netlime.eu/wp-json/get-posts/v2/all/");
data = await response.json();
await AsyncStorage.setItem('#MySuperStore:articles_storage_' + this.state.category, JSON.stringify(data));
}
try {
data = JSON.parse(data);
} catch (e) {
}
// your issue is here
______________________________________________
this.setState({articles: data});
this.createArticleList();
______________________________________________
// change to this.
this.setState({articles: data}, () => {
this.createArticleList();
});
}
because setState is async you are creating the articleList state item before the articles are set on state. so the UI never gets updated
Edit
To be honest you shouldn't use a secondary state variable to hold an array of the articles to be rendered. create them on the fly.
export default class ArticleList extends React.Component {
constructor(props) {
super(props);
this.state = {
articles: [],
category: this.props.category ? this.props.category : 0
};
}
async fetchData() {
let data = null; //await AsyncStorage.getItem('#MySuperStore:articles_storage_' + this.state.category);
if (data === null) {
const response = await fetch("https://www.netlime.eu/wp-json/get-posts/v2/all/");
data = await response.json();
await AsyncStorage.setItem('#MySuperStore:articles_storage_' + this.state.category, JSON.stringify(data));
}
try {
data = JSON.parse(data);
} catch (e) {
}
this.setState({articles: data});
}
componentDidMount() {
this.fetchData();
}
render() {
const articles = this.state.articles.map((article) => {
return (
<ArticleListItem
key={article.ID}
article={article}
/>
);
});
return (
<div>
{ articles.length ? articles : <ArticleListItemPlaceholder/>}
</div>
);
}
}