{"id":6136,"date":"2025-03-10T12:55:20","date_gmt":"2025-03-10T12:55:20","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-spinner-chargement-react\/"},"modified":"2025-03-10T12:55:24","modified_gmt":"2025-03-10T12:55:24","slug":"ajouter-spinner-chargement-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-spinner-chargement-react\/","title":{"rendered":"11.10 Ajouter un Spinner pendant le Chargement en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Spinner Chargement React<\/strong> est un excellent moyen d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en indiquant que du contenu est en cours de chargement. Dans ce tutoriel, nous allons explorer l&rsquo;int\u00e9gration d&rsquo;un spinner dans une application React, permettant ainsi aux utilisateurs de savoir que l&rsquo;application travaille en arri\u00e8re-plan lorsque les donn\u00e9es sont en cours de chargement. D\u00e9couvrez \u00e9galement nos conseils pour <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">comprendre le cycle de vie d&rsquo;une application React<\/a> et comment g\u00e9rer efficacement l&rsquo;\u00e9tat pour optimiser votre application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Utilisation d&rsquo;un <strong>Spinner Chargement React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706123159?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) {\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play();\n    }\n});\n<\/script>\n\n\n\n<p>Un spinner en React est souvent utilis\u00e9 pour montrer qu&rsquo;une action asynchrone est en cours, par exemple, la r\u00e9cup\u00e9ration de donn\u00e9es depuis une API. Il est particuli\u00e8rement utile pour indiquer visuellement que des <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">applications React<\/a> rassemblent des informations importantes en arri\u00e8re-plan. L&rsquo;utilisation de spinners rend vos applications plus professionnelles et fluides, d\u00e9couvrons comment les mettre en place avec quelques exemples pratiques et les meilleures pratiques pour <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installer des Composants de Spinner en React<\/h3>\n\n\n\n<p>Pour commencer, nous allons utiliser un package populaire appel\u00e9 <code>react-spinners<\/code> pour int\u00e9grer un spinner dans notre application React. Vous pouvez l&rsquo;installer via npm ou yarn. Cela vous donnera des spinners pr\u00e9con\u00e7us pour des chargements, ajoutant ainsi une touche professionnelle \u00e0 votre projet. Pour plus d&rsquo;informations sur d&rsquo;autres packages utiles, consultez notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">extensions indispensables pour d\u00e9velopper en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>\/\/ Avec npm\nnpm install react-spinners\n\n\/\/ Avec yarn\nyarn add react-spinners\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer le Spinner dans un Composant React<\/h3>\n\n\n\n<p>Une fois le package install\u00e9, nous pouvons ajouter le spinner \u00e0 un composant fonctionnel basique. Supposons que nous ayons une action asynchrone comme un appel API o\u00f9 nous voulons montrer un spinner pendant le chargement. Cette m\u00e9thode est standard dans le d\u00e9veloppement de composants fonctionnels, souvent illustr\u00e9e dans des <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" target=\"_blank\" rel=\"noopener\">approches React pour la gestion des props et state<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\nimport ClipLoader from 'react-spinners\/ClipLoader';\n\nfunction App() {\n  const [loading, setLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    fetch('https:\/\/api.example.com\/data')\n      .then(response => response.json())\n      .then(data => {\n        setData(data);\n        setLoading(false);\n      })\n      .catch(error => {\n        console.error('Error fetching data:', error);\n        setLoading(false);\n      });\n  }, []);\n\n  return (\n    <div className=\"App\">\n      {loading ? (\n        <ClipLoader size={150} color={\"#123abc\"} loading={loading} \/>\n      ) : (\n        <div>{\/* Afficher les donn\u00e9es ici *\/}<\/div>\n      )}\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnalisation des Spinners<\/h3>\n\n\n\n<p>Les spinners que vous int\u00e9grez dans React peuvent \u00eatre personnalis\u00e9s selon vos pr\u00e9f\u00e9rences d&rsquo;interface utilisateur. Vous pouvez ajuster la taille, la couleur et d&rsquo;autres propri\u00e9t\u00e9s pour qu&rsquo;ils correspondent au th\u00e8me de votre application. Cela permet de renforcer la coh\u00e9rence visuelle de votre projet. Explorez les autres techniques de design en lisant notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-module-css-utiliser-react\" target=\"_blank\" rel=\"noopener\">modules CSS avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>{loading ? (\n  <ClipLoader size={100} color={\"#ff5733\"} loading={loading} \/>\n) : (\n  <div>Donn\u00e9es charg\u00e9es avec succ\u00e8s !<\/div>\n)}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combinaison de Spinners avec React Suspense<\/h3>\n\n\n\n<p>La biblioth\u00e8que <code>React<\/code> offre la fonctionnalit\u00e9 <code>React Suspense<\/code> qui contribue \u00e0 la gestion du chargement des composants asynchrones. Associer des spinners avec <code>React Suspense<\/code> peut optimiser le chargement des donn\u00e9es des API lourdes, ce qui am\u00e9liore encore l&rsquo;exp\u00e9rience utilisateur. Pour une compr\u00e9hension approfondie des ensembles de composants, d\u00e9couvrez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-utiliser-context-api-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;API Context de React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Suspense, lazy } from 'react';\nimport ClipLoader from 'react-spinners\/ClipLoader';\n\nconst LazyComponent = lazy(() => import('.\/LazyComponent'));\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Suspense fallback={<ClipLoader size={150} color={\"#123abc\"} \/>}>\n        <LazyComponent \/>\n      <\/Suspense>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur le Spinner Chargement React<\/h2>\n\n\n\n<p>L&rsquo;int\u00e9gration d&rsquo;un <strong>spinner chargement React<\/strong> dans votre application am\u00e9liore consid\u00e9rablement l&rsquo;exp\u00e9rience utilisateur. En fournissant des indications visuelles pendant le chargement, vos utilisateurs sauront que l&rsquo;application r\u00e9agit effectivement en arri\u00e8re-plan. Les spinners peuvent aussi \u00eatre utilis\u00e9s pour minimiser les frustrations potentielles lors des chargements plus longs. Pour explorer plus de potentiel avec React et Redux, vous pouvez aussi lire notre ressource sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">l&rsquo;utilisation de Redux avec React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/react-redux-course-banner.gif\" loading=\"lazy\" alt=\"Cr\u00e9er des Sites Interactifs avec React et Redux\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation Redux et React\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Spinner Chargement React est un excellent moyen d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur en indiquant que du contenu est en cours de chargement. Dans ce tutoriel, nous&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3162,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6136"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6136\/revisions"}],"predecessor-version":[{"id":6137,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6136\/revisions\/6137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3162"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}