{"id":6740,"date":"2021-07-14T04:13:40","date_gmt":"2021-07-14T04:13:40","guid":{"rendered":"https:\/\/programmingfields.com\/?p=6740"},"modified":"2023-10-04T07:36:21","modified_gmt":"2023-10-04T07:36:21","slug":"how-to-create-loading-spinner-using-bootstrap-in-react-js","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/how-to-create-loading-spinner-using-bootstrap-in-react-js\/","title":{"rendered":"How to Create Loading Spinner Using Bootstrap in React JS"},"content":{"rendered":"\n<p>Generally, an API takes time to return the response. It depends upon the server configuration and the data size. While fetching the data through API the screen goes blank until the response shows. It is not a good user experience for real-world applications. There can be<strong> <\/strong>possibilities that the user will change the screen or refresh the page. Sometimes the user can go off the website. There must be something in the website that the user will stay to that screen. So, we show an indicator to the user that data is loading. Here, we will implement the <strong>loading spinner in React JS<\/strong>. There are lots of npm packages available to set the <strong>loading spinner in React JS<\/strong>. In this post, I will show you the Bootstrap spinner in React JS. React Bootstrap loader is very simple and easy to implement. So, let&#8217;s do that quickly.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/how-to-create-loading-spinner-using-bootstrap-in-react-js\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/how-to-create-loading-spinner-using-bootstrap-in-react-js\/#Install_Bootstrap_in_React_JS\" >Install Bootstrap in React JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/how-to-create-loading-spinner-using-bootstrap-in-react-js\/#Create_Component_in_React_For_Loading_Spinner\" >Create Component in React For Loading Spinner<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/how-to-create-loading-spinner-using-bootstrap-in-react-js\/#Apply_Loading_Spinner_in_React_JS\" >Apply Loading Spinner in React JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/how-to-create-loading-spinner-using-bootstrap-in-react-js\/#Final_Words\" >Final Words<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before moving to this post, I assume, you are familiar with the following-<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>React JS core<\/strong><\/li>\n\n\n\n<li><strong>React Router DOM<\/strong><\/li>\n\n\n\n<li><strong>Axios For API Handling<\/strong><\/li>\n<\/ul>\n\n\n\n<p>For creating a React JS application, you will require<strong> Node.js<\/strong> installed in your system. When you are ready, let&#8217;s hit the below command to have a new application.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npx create-react-app blog<\/code><\/pre>\n\n\n\n<p>It will take a couple of minutes to install React JS inside the specified directory.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-17-08-41-27.png?w=803&amp;ssl=1\" alt=\"Create React JS Application\"\/><figcaption class=\"wp-element-caption\"><strong>Create React JS Application<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>After creating the application, just navigate to the application folder and run it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">cd blog\nnpm start<\/code><\/pre>\n\n\n\n<p>It will start the development server of React Application. In the browser, you will be having the homepage of React JS.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-18-20-31-57.png?w=703&amp;ssl=1\" alt=\"React JS Homepage\"\/><figcaption class=\"wp-element-caption\"><strong>React JS Homepage<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Here, you have the React JS application ready. Now, it&#8217;s time to create React loading spinner using Bootstrap. But, before that, you need the Bootstrap package installed in the application.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/file-upload-in-react-js-using-laravel-8-restful-api\/\" target=\"_blank\" rel=\"noreferrer noopener\">File Upload in React JS Using Laravel 8 RESTful API<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Install_Bootstrap_in_React_JS\"><\/span><strong>Install Bootstrap in React JS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To install the React bootstrap package, just visit the official site of <a rel=\"noreferrer noopener\" href=\"https:\/\/react-bootstrap.github.io\/\" target=\"_blank\">React Bootstrap<\/a>. You will have the below page. So, simply click on the <strong>Get started <\/strong>button. You will have the command to install the React Bootstrap.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"985\" height=\"594\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-49-54.png?resize=985%2C594&#038;ssl=1\" alt=\"React Bootstrap Official Page\" class=\"wp-image-6748\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-49-54.png?w=985&amp;ssl=1 985w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-49-54.png?resize=300%2C181&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-49-54.png?resize=768%2C463&amp;ssl=1 768w\" sizes=\"auto, (max-width: 985px) 100vw, 985px\" \/><figcaption class=\"wp-element-caption\"><strong>React Bootstrap Official Page<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Now, in the terminal just hit the command as showing below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npm install react-bootstrap bootstrap@5.0.2<\/code><\/pre>\n\n\n\n<p>This will add the Bootstrap dependency inside your React JS application.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-53-47.png?resize=1024%2C285&#038;ssl=1\" alt=\"Bootstrap Installed in React JS Application\" class=\"wp-image-6749\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-53-47.png?resize=1024%2C285&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-53-47.png?resize=300%2C83&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-53-47.png?resize=768%2C213&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-07-53-47.png?w=1047&amp;ssl=1 1047w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>React Bootstrap Installed in React JS Application<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>For API requests handling, we will be using the Axios library. So, also, you will have to install the Axios here.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npm i axios<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-24-12-05-19.png?w=932&amp;ssl=1\" alt=\"Install Axios in React JS\"\/><figcaption class=\"wp-element-caption\"><strong>Install Axios in React JS<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Now, you are good to go for creating components and for API response handling.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-use-axios-in-react-js-for-http-requests-handling\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use Axios in React JS For API Requests Handling<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Component_in_React_For_Loading_Spinner\"><\/span><strong>Create Component in React For Loading Spinner<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For applying the loading spinner in React, I will set it with the API response. In the last post of React JS, I have shown you the use of the <a rel=\"noreferrer noopener\" href=\"https:\/\/programmingfields.com\/how-to-use-axios-in-react-js-for-http-requests-handling\/\" target=\"_blank\">Axios library for HTTP requests handling in React.<\/a> <\/p>\n\n\n\n<p>Here, I am creating a <strong>Posts.js<\/strong> component for fetching the posts using the fake API. So, after creating the component, let&#8217;s put the below snippet there.<\/p>\n\n\n\n<pre title=\"Posts.jsx\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, { Component } from \"react\";\nimport axios from \"axios\";\n\nexport default class Posts extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      posts: [],\n      message: \"\",\n    };\n  }\n\n  componentDidMount() {\n    \/\/ GET request\n    this.fetchPosts();\n  }\n\n  \/\/ fetch all post using GET request\n  fetchPosts = () =&gt; {\n    axios\n      .get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n      .then((response) =&gt; {\n        if (response.status === 200) {\n          this.setState({\n            posts: response.data,\n          });\n        }\n      })\n      .catch((error) =&gt; {\n        console.log(error);\n      });\n  };\n\n  render() {\n    return (\n      &lt;div className=\"container-fluid py-3\"&gt;\n        &lt;div className=\"card\"&gt;\n          &lt;div className=\"card-header\"&gt;\n            &lt;h4 className=\"card-title font-weight-bold text-center\"&gt; API Request Handling in React Using Axios &lt;\/h4&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"card-body\"&gt;\n            &lt;div className=\"row\"&gt;\n              &lt;div className=\"col-xl-4 col-lg-4 col-sm-4\"&gt;\n                &lt;h5 className=\"font-weight-bold\"&gt;GET Request - Fetch Posts&lt;\/h5&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"col-xl-4 col-lg-4 col-sm-4\"&gt;\n                &lt;span className=\"text-success\"&gt;\n                  {this.state.message ? this.state.message : \"\"}\n                &lt;\/span&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"col-xl-4 col-lg-4 col-sm-4 text-end\"&gt;\n                &lt;button className=\"btn btn-primary\"&gt; Create Post &lt;\/button&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n\n            &lt;table className=\"table table-bordered my-3\"&gt;\n              &lt;thead&gt;\n                &lt;tr&gt;\n                  &lt;th&gt;ID&lt;\/th&gt;\n                  &lt;th&gt;Title&lt;\/th&gt;\n                  &lt;th&gt;Body&lt;\/th&gt;                 \n                &lt;\/tr&gt;\n              &lt;\/thead&gt;\n              &lt;tbody&gt;\n               {this.state.posts.length &gt; 0 ? (\n                  this.state.posts.map((post) =&gt; (\n                    &lt;tr key={post.id}&gt;\n                      &lt;td&gt; {post.id} &lt;\/td&gt;\n                      &lt;td&gt; {post.title} &lt;\/td&gt;\n                      &lt;td&gt; {post.body} &lt;\/td&gt;                      \n                    &lt;\/tr&gt;\n                  ))\n                ) : (\n                  &lt;tr&gt;\n                    &lt;td colSpan=\"4\"&gt;\n                      &lt;h5 className=\"text-danger text-center\"&gt;No post found&lt;\/h5&gt;\n                    &lt;\/td&gt;\n                  &lt;\/tr&gt;\n                )}\n              &lt;\/tbody&gt;\n            &lt;\/table&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<p>After creating the route for the above component, you will be having the result as showing below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-08-36-29.png?resize=1024%2C527&#038;ssl=1\" alt=\"Posts Response Using Axios Library\" class=\"wp-image-6755\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-08-36-29.png?resize=1024%2C527&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-08-36-29.png?resize=300%2C154&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-08-36-29.png?resize=768%2C395&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/Screenshot-from-2021-07-14-08-36-29.png?w=1267&amp;ssl=1 1267w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\"><strong>Posts Response Using Axios Library<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Here, we have the data in the response. But, while fetching the data, it takes a time of milliseconds.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"454\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/CPT2107140903-1000x454-1.gif?resize=1000%2C454&#038;ssl=1\" alt=\"react loading spinner\" class=\"wp-image-6760\"\/><figcaption class=\"wp-element-caption\"><strong>React API Response with Loading Spinner<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p> So, here we will fill this gap with a <strong>React bootstrap loader.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/form-handling-in-react-js-with-validation-using-react-state\/\" target=\"_blank\" rel=\"noreferrer noopener\">Form Handling in React JS With Validation Using React State<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apply_Loading_Spinner_in_React_JS\"><\/span><strong>Apply Loading Spinner in React JS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>React Bootstrap provides the spinner component. So, firstly, you will need to import the spinner component at the top.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import Spinner from \"react-bootstrap\/Spinner\"<\/code><\/pre>\n\n\n\n<p>After that, we will define a state for the loader. The initial state will be false for the loading as showing below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">this.state = {\n    posts: [],\n    message: \"\",\n    loading: false,\n};<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, in the <strong>fetchPosts() <\/strong>function, we will set it to true at the very first. So, that when the function will call the loading state will become true.<\/li>\n\n\n\n<li>After getting the API response, again the loading state will become false. <\/li>\n<\/ul>\n\n\n\n<p>That&#8217;s the logic for applying the React bootstrap loading spinner.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">fetchPosts = () =&gt; {\n    this.setState({ loading: true });\n\n    axios\n      .get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n      .then((response) =&gt; {\n        if (response.status === 200) {\n          this.setState({\n            posts: response.data,\n            loading: false,\n          });\n        }\n      })\n      .catch((error) =&gt; {\n        console.log(error);\n      });\n  };<\/code><\/pre>\n\n\n\n<p>Now, it&#8217;s time to display the React loading spinner on the basis of the condition at the table area.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">{this.state.loading ? (\n    &lt;tr&gt;\n      &lt;td rowSpan=\"4\" colSpan=\"4\"&gt;\n        &lt;div className=\"text-center py-5\"&gt;\n            &lt;Spinner animation=\"border\" \/&gt;\n        &lt;\/div&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  ) : this.state.posts.length &gt; 0 ? (\n    this.state.posts.map((post) =&gt; (\n      &lt;tr key={post.id}&gt;\n        &lt;td&gt; {post.id} &lt;\/td&gt;\n        &lt;td&gt; {post.title} &lt;\/td&gt;\n        &lt;td&gt; {post.body} &lt;\/td&gt;\n      &lt;\/tr&gt;\n    ))\n  ) : (\n    &lt;tr&gt;\n      &lt;td colSpan=\"4\"&gt;\n        &lt;h5 className=\"text-danger text-center\"&gt;No post found&lt;\/h5&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  )}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above snippet, I have checked the state of <strong>loading<\/strong> spinner. If it is true then spinner component is displaying. Otherwise, the table content will be displaying.<\/li>\n<\/ul>\n\n\n\n<p>So, the final snippet of the component will look like this &#8211;<\/p>\n\n\n\n<pre title=\"App.jsx\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, { Component } from \"react\";\nimport axios from \"axios\";\nimport Spinner from \"react-bootstrap\/Spinner\";\n\nexport default class Posts extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      posts: [],\n      message: \"\",\n      loading: false,\n    };\n  }\n\n  componentDidMount() {\n    \/\/ GET request\n    this.fetchPosts();\n  }\n\n  \/\/ fetch all post using GET request\n  fetchPosts = () =&gt; {\n    this.setState({ loading: true });\n\n    axios\n      .get(\"https:\/\/jsonplaceholder.typicode.com\/posts\")\n      .then((response) =&gt; {\n        if (response.status === 200) {\n          this.setState({\n            posts: response.data,\n            loading: false,\n          });\n        }\n      })\n      .catch((error) =&gt; {\n        console.log(error);\n      });\n  };\n\n  render() {\n    return (\n      &lt;div className=\"container-fluid py-3\"&gt;\n        &lt;div className=\"card\"&gt;\n          &lt;div className=\"card-header\"&gt;\n            &lt;h4 className=\"card-title font-weight-bold text-center\"&gt; API Request Handling in React Using Axios &lt;\/h4&gt;\n          &lt;\/div&gt;\n\n          &lt;div className=\"card-body\"&gt;\n            &lt;div className=\"row\"&gt;\n              &lt;div className=\"col-xl-4 col-lg-4 col-sm-4\"&gt;\n                &lt;h5 className=\"font-weight-bold\"&gt;GET Request - Fetch Posts&lt;\/h5&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"col-xl-4 col-lg-4 col-sm-4\"&gt;\n                &lt;span className=\"text-success\"&gt;\n                  {this.state.message ? this.state.message : \"\"}\n                &lt;\/span&gt;\n              &lt;\/div&gt;\n\n              &lt;div className=\"col-xl-4 col-lg-4 col-sm-4 text-end\"&gt;\n                &lt;Link to={\"\/posts\/create\"} className=\"btn btn-primary\"&gt; Create Post &lt;\/Link&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n\n            &lt;table className=\"table table-bordered my-3\"&gt;\n              &lt;thead&gt;\n                &lt;tr&gt;\n                  &lt;th&gt;ID&lt;\/th&gt;\n                  &lt;th&gt;Title&lt;\/th&gt;\n                  &lt;th&gt;Body&lt;\/th&gt;\n                &lt;\/tr&gt;\n              &lt;\/thead&gt;\n              &lt;tbody&gt;\n                {this.state.loading ? (\n                  &lt;tr&gt;\n                    &lt;td rowSpan=\"4\" colSpan=\"4\"&gt;\n                      &lt;div className=\"text-center py-5\"&gt;\n                          &lt;Spinner animation=\"border\" \/&gt;\n                      &lt;\/div&gt;\n                    &lt;\/td&gt;\n                  &lt;\/tr&gt;\n                ) : this.state.posts.length &gt; 0 ? (\n                  this.state.posts.map((post) =&gt; (\n                    &lt;tr key={post.id}&gt;\n                      &lt;td&gt; {post.id} &lt;\/td&gt;\n                      &lt;td&gt; {post.title} &lt;\/td&gt;\n                      &lt;td&gt; {post.body} &lt;\/td&gt;\n                    &lt;\/tr&gt;\n                  ))\n                ) : (\n                  &lt;tr&gt;\n                    &lt;td colSpan=\"4\"&gt;\n                      &lt;h5 className=\"text-danger text-center\"&gt;No post found&lt;\/h5&gt;\n                    &lt;\/td&gt;\n                  &lt;\/tr&gt;\n                )}\n              &lt;\/tbody&gt;\n            &lt;\/table&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<p>Now, switch to the browser and check the result.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"475\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/CPT2107140916-1000x475-1.gif?resize=1000%2C475&#038;ssl=1\" alt=\"API response with react loading spinner\" class=\"wp-image-6763\"\/><figcaption class=\"wp-element-caption\"><strong>API Response with Loading Spinner<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>You may change the variants for the spinner. Bootstrap providers the different variants and animation types for the spinner component.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/create-react-routing-in-react-js-using-react-router-dom\/\" target=\"_blank\" rel=\"noreferrer noopener\">Brief Overview of React Routing Using React Router DOM<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Words\"><\/span><strong>Final Words<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I am wrapping up the post here. I assume you got the basic idea of implementing the React loading spinner in your application. You can try different variants and animations like <strong>grow<\/strong>. You can customize the size of the spinner as per your requirement. Using this way, you can apply the overlay for a full-page using the loading spinner. React bootstrap loader is a clean and easiest way to implement. I hope this post will helpful for you all. Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generally, an API takes time to return the response. It depends upon the server configuration and the data size. While fetching the data through API the screen goes blank until the response shows. It is not a good user experience for real-world applications. There can be possibilities that the user will change the screen or [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":6768,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1369],"tags":[1593,2161,2158,2162,2157,2160],"yst_prominent_words":[1698,322,1421,1401,1420],"class_list":{"0":"post-6740","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-axios-in-react","9":"tag-bootstrap-loading-spinner","10":"tag-loading-spinner-in-react-js","11":"tag-react-boostrap-spinner","12":"tag-react-spinner","13":"tag-spinner-with-axios","14":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/07\/crate-loading-spinner-in-react.gif?fit=1440%2C810&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=6740"}],"version-history":[{"count":2,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6740\/revisions"}],"predecessor-version":[{"id":10655,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6740\/revisions\/10655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/6768"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=6740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=6740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=6740"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=6740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}