diff --git a/public/index.html b/public/index.html
index fb4cd42f9..612cefda0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,7 @@
     -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="stylesheet" type="text/css" href="https://cdn.fromdoppler.com/doppler-ui-library/v1.0.1/css/styles.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.fromdoppler.com/doppler-ui-library/v1.0.2/css/styles.css">
     <link rel="stylesheet" type="text/css" href="zoho-chat.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
@@ -47,7 +47,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script type="text/javascript" src="https://cdn.fromdoppler.com/doppler-ui-library/v1.0.1/js/app.js"></script>
+    <script type="text/javascript" src="https://cdn.fromdoppler.com/doppler-ui-library/v1.0.2/js/app.js"></script>
     <script type="text/javascript" src="zoho-chat.js"></script>
   </body>
 </html>
diff --git a/src/components/Loading/Loading.js b/src/components/Loading/Loading.js
index f45ca172d..96f0332f7 100644
--- a/src/components/Loading/Loading.js
+++ b/src/components/Loading/Loading.js
@@ -1,21 +1,12 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 
 export default function({ page }) {
   if (page) {
     return (
       <div className="wrapper-loading">
-        <div className="loading-page">
-          <p id="loading" className="flash">
-            &nbsp;
-          </p>
-        </div>
+        <div className="loading-page" />
       </div>
     );
   }
-  return (
-    <div>
-      <FormattedMessage id="loading" />
-    </div>
-  );
+  return <div className="loading-box" />;
 }
diff --git a/src/components/Reports/Reports.js b/src/components/Reports/Reports.js
index c09627a8c..0f5cdb904 100644
--- a/src/components/Reports/Reports.js
+++ b/src/components/Reports/Reports.js
@@ -9,6 +9,7 @@ import {
   SiteTrackingNotAvailableReasons,
 } from '../SiteTrackingRequired/SiteTrackingRequired';
 import { Helmet } from 'react-helmet';
+import Loading from '../Loading/Loading';
 
 class Reports extends React.Component {
   /**
@@ -77,7 +78,7 @@ class Reports extends React.Component {
             changePeriod={this.changePeriod}
           />
           {!this.state.domains ? (
-            <div className="loading-box" />
+            <Loading />
           ) : (
             <section className="container-reports">
               <div className="wrapper-kpi">
diff --git a/src/components/Reports/ReportsPageRanking/ReportsPageRanking.js b/src/components/Reports/ReportsPageRanking/ReportsPageRanking.js
index 1cd28f4b3..5a76e1f6d 100644
--- a/src/components/Reports/ReportsPageRanking/ReportsPageRanking.js
+++ b/src/components/Reports/ReportsPageRanking/ReportsPageRanking.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { InjectAppServices } from '../../../services/pure-di';
 import { FormattedMessage } from 'react-intl';
+import Loading from '../../Loading/Loading';
 
 class ReportsPageRanking extends React.Component {
   constructor({ dependencies: { datahubClient } }) {
@@ -68,10 +69,10 @@ class ReportsPageRanking extends React.Component {
 
     return (
       <>
-        {pages === null ? (
-          <div className="loading-box" />
-        ) : (
-          <div className="wrapper-ranking">
+        <div className="wrapper-ranking">
+          {pages === null ? (
+            <Loading />
+          ) : (
             <div className="reports-box">
               <h4 className="title-ranking">
                 <FormattedMessage id="reports_pageranking.top_pages" />
@@ -100,8 +101,8 @@ class ReportsPageRanking extends React.Component {
                 </div>
               ))}
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </>
     );
   }