Discussion :

[haddocks]

Bonjour,

Sur mon site j'ai une page "product" chargé d'afficher un produit demandé par l'utilisateur. Une requête est envoyée au serveur qui retourne les données du produit et le produit s'affiche.
Le problème est que cette page s'affiche en 2 temps. 1er temps, elle s'affiche avec la structure de la page, 2ème temps elle affiche la structure avec les données du produit correctement.

Comment faites vous pour éviter ce genre de problème ?

[mathieu]

si on regarde par exemple le titre du produit qui s'affiche dans le 2e temps, est ce que ce titre est dans le code html ou alors c'est du code javascript qui va par exemple faire une requete http en plus et ensuite afficher le titre ?

[haddocks]

s'est javascript qui charge le contenu dans les balises html, don le titre du produit.

voici la requête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const fetchProductData = () => {
  fetch("/get-products", {
    method: "post",
    headers: new Headers({ "Content-Type": "application/json" }),
    body: JSON.stringify({ id: productId }),
  })
    .then((res) => res.json())
    .then((data) => {
      return new Promise((resolve, reject) => {
        setData(data);
        resolve();
      });
    })
    .then(() => {
      return getProducts(data.tags[1]).then((data) => createProductSlider(data, ".container-for-card-slider", "similar products"));
    })
    .catch((err) => {
      location.replace("/404");
    });
};

S'est les fonctions setData() et getProducts() qui doivent prendre trop de temps. setData() distribue les données dans le html. getProducts() affiche un slider en dessous de la fiche produit. D'un autre côté, l'URL de cette page "produit" associé à son ID est déclenchée immédiatement après avoir cliqué sur sa mini carte produit.
Mon idée serait d'attendre la fin du traitement de fetchProductData () avant d'afficher la page. Par exemple avec une nouvelle promesse...
Et sur le chargement de la page, je pourrais peut-être faire quelque chose dans ce genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
window.addEventListener("load", () => {
  if (location.pathname != "/products") {
    productId = decodeURI(location.pathname.split("/").pop());
    fetchProductData().then(() => {
      location.href = `products/${productId}`;
    });
  }
});

[mathieu]

"location.href" va recharger la page et donc toutes les variables javascript seront vidées.

ce que j'ai souvent vu pour votre souci est qu'au début de la page, vous affichez un message d'attente et vous cachez le reste. et une fois que toutes les données sont mises en place, vous affichez toute la page.
regardez cela par exemple :
https://ihatetomatoes.net/create-cus...oading-screen/

[haddocks]

ça fonctionne bien.
Thanks

[mathieu]

au sujet de votre code javascript, je voulais aussi rajouter que vous pouvez le simplifier comme cela (si "setData" est synchrone si j'ai bien compris)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const fetchProductData = () => {
 
	fetch("/get-products", {
		method: "post",
		headers: new Headers({ "Content-Type": "application/json" }),
		body: JSON.stringify({ id: productId }),
	})
		.then(res => res.json())
		.then(data => {
			setData(data);
			return getProducts(data.tags[1]);
		})
		.then(produits => createProductSlider(produits, ".container-for-card-slider", "similar products"));
		.catch(err => location.replace("/404"))
	;
 
};