feat: add block list apps loading

src/pages/BlockApps/BlockApps.tsx

@@ -15,6 +15,7 @@ import {
   fetchBlackList,
   fetchWhiteList,
 } from "../../stores/slices/appsSlice";
+import CLoading from "../../components/CLoading";
 
 const BlockApps: React.FC = () => {
   const [selectedTab, setSelectedTab] = useState<"all" | "blocked" | "allowed">(
@@ -22,9 +23,14 @@ const BlockApps: React.FC = () => {
   );
   const { t } = useTranslation();
   const { selectedDevice } = useAppSelector((state: RootState) => state.device);
-  const { allApps, blackList, whiteList } = useAppSelector(
-    (state: RootState) => state.apps
-  );
+  const {
+    allApps,
+    isLoadingAllApps,
+    blackList,
+    isLoadingBlackList,
+    whiteList,
+    isLoadingWhiteList,
+  } = useAppSelector((state: RootState) => state.apps);
   const dispatch = useAppDispatch();
 
   const fetchDatas = useCallback(async () => {
@@ -56,12 +62,18 @@ const BlockApps: React.FC = () => {
               <CButton title={t("blockapps.allow")} disabled />
             </div>
 
-            {allApps.length === 0 && (
+            {!isLoadingAllApps && allApps.length === 0 && (
               <div className="blockapps__content__empty">
                 <p>{t("blockapps.noFoundApps")}</p>
               </div>
             )}
 
+            {isLoadingAllApps && (
+              <div className="cloading__center">
+                <CLoading />
+              </div>
+            )}
+
             <div className="blockapps__content__apps">
               {allApps.map((app, index) => {
                 return (
@@ -88,12 +100,18 @@ const BlockApps: React.FC = () => {
               <CButton title={t("blockapps.unBlock")} disabled />
             </div>
 
-            {blackList.length === 0 && (
+            {!isLoadingBlackList && blackList.length === 0 && (
               <div className="blockapps__content__empty">
                 <p>{t("blockapps.noFoundApps")}</p>
               </div>
             )}
 
+            {isLoadingBlackList && (
+              <div className="cloading__center">
+                <CLoading />
+              </div>
+            )}
+
             <div className="blockapps__content__apps">
               {blackList.map((app, index) => {
                 return (
@@ -120,12 +138,18 @@ const BlockApps: React.FC = () => {
               <CButton title={t("blockapps.remove")} disabled />
             </div>
 
-            {whiteList.length === 0 && (
+            {!isLoadingWhiteList && whiteList.length === 0 && (
               <div className="blockapps__content__empty">
                 <p>{t("blockapps.noFoundApps")}</p>
               </div>
             )}
 
+            {isLoadingWhiteList && (
+              <div className="cloading__center">
+                <CLoading />
+              </div>
+            )}
+
             <div className="blockapps__content__apps">
               {whiteList.map((app, index) => {
                 return (