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,28 +53,32 @@ 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 ? (
-            <div className="browserhistory__list">
-              {browserHistories.map((history, index) => {
-                return (
-                  <div className="browserhistory__item" key={index}>
-                    <p className="browserhistory__item__title">
-                      {t("browserHistory.website")}: {history.name}
-                    </p>
-                    <p>
-                      {t("browserHistory.date")}: {history.date}
-                    </p>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
+          {browserHistories.length === 0 && !loading && (
             <p>{t("browserHistory.empty")}</p>
           )}
+
+          <div className="browserhistory__list">
+            {browserHistories.map((history, index) => {
+              return (
+                <div className="browserhistory__item" key={index}>
+                  <p className="browserhistory__item__title">
+                    {t("browserHistory.website")}: {history.name}
+                  </p>
+                  <p>
+                    {t("browserHistory.date")}: {history.date}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
         </div>
 
         <div className="browserhistory__filter">