refactor: browser history loading and data

src/pages/BrowserHistory/BrowserHistory.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../stores/store";
 import { fetchBrowserHistory } from "../../stores/slices/browserHistorySlice";
 import { useTranslation } from "react-i18next";
+import CLoading from "../../components/CLoading";
 
 const BrowserHistory: React.FC = () => {
   const today = new Date().toISOString().split("T")[0];
@@ -52,11 +53,18 @@ const BrowserHistory: React.FC = () => {
             <MdInfoOutline className="browserhistory__content__header__icon" />
           </div>
 
-          {loading && <p>{t("common.loading")}</p>}
+          {loading && (
+            <div className="cloading__center">
+              <CLoading />
+            </div>
+          )}
 
           {error && <p className="text-danger">{error}</p>}
 
-          {browserHistories.length > 0 ? (
+          {browserHistories.length === 0 && !loading && (
+            <p>{t("browserHistory.empty")}</p>
+          )}
+
           <div className="browserhistory__list">
             {browserHistories.map((history, index) => {
               return (
@@ -71,9 +79,6 @@ const BrowserHistory: React.FC = () => {
               );
             })}
           </div>
-          ) : (
-            <p>{t("browserHistory.empty")}</p>
-          )}
         </div>
 
         <div className="browserhistory__filter">