added loaded and enable disable for useQuery

src/components/ContextMenu/index.jsx

@@ -39,7 +39,7 @@ const ContextMenu = (props) => {
   const { isTrash } = useUtils();
   const dispatch = useAppDispatch();
   const liClassname =
-    "flex w-full px-[20px] py-[12px] items-center font-normal text-[#637381] justify-start no-underline transition-all duration-400 ease-in-out text- hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium";
+    "flex w-full px-[20px] py-[12px] items-center font-normal text-[#637381] justify-start no-underline animate hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium";
   const spanClassname = "flex items-center justify-center mr-[18px]";
 
   const renameItem = async () => {

src/components/Dataform/index.jsx

@@ -1,6 +1,6 @@
 import QuickAccess from "../QuickAccess";
 import Folders from "../Folders";
-import { useFiles } from "../../hooks/files";
+import { useFiles, useQuickFiles } from "../../hooks/files";
 import { useInfiniteScroll } from "../../hooks/infiniteScroll";
 import Files from "../Files";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
@@ -12,18 +12,24 @@ import { useParams } from "react-router-dom";
 import classNames from "classnames";
 import { useDragAndDrop } from "../../hooks/utils";
 import MultiSelectBar from "../MultiSelectBar";
+import { useFolders } from "../../hooks/folders";
 
 const DataForm = memo(() => {
   const {
     fetchNextPage: filesFetchNextPage,
     isFetchingNextPage,
     data: fileList,
+    isLoading: isLoadingFiles,
   } = useFiles();
+  const { isLoading: isLoadingFolders } = useFolders();
+  const { isLoading: isLoadingQuickItems } = useQuickFiles();
   const dispatch = useAppDispatch();
   const { sentinelRef, reachedIntersect } = useInfiniteScroll();
   const [initialLoad, setInitialLoad] = useState(true);
   const params = useParams();
 
+  const isLoading = isLoadingFiles || isLoadingFolders || isLoadingQuickItems;
+
   useEffect(() => {
     if (initialLoad) {
       setInitialLoad(false);
@@ -53,22 +59,35 @@ const DataForm = memo(() => {
 
   return (
     <div
-      className={classNames("w-full p-[17px_40px] overflow-y-scroll", {
-        "opacity-50": isDraggingFile,
-      })}
+      className={classNames(
+        "w-full p-[17px_15px] mobileMode:p-[17px_40px] overflow-y-scroll",
+        {
+          "opacity-50": isDraggingFile,
+        }
+      )}
       onDrop={onDragDropEvent}
       onDragOver={onDragEvent}
       onDragLeave={onDragEvent}
       onDragEnter={onDragEnterEvent}
       onMouseLeave={stopDrag}
     >
-      <MultiSelectBar />
+      {!isLoading && (
+        <div>
+          <MultiSelectBar />
 
-      <QuickAccess />
+          <QuickAccess />
 
-      <Folders />
+          <Folders />
 
-      <Files />
+          <Files />
+        </div>
+      )}
+
+      {isLoading && (
+        <div className="w-full flex justify-center items-center h-full">
+          <SpinnerPage />
+        </div>
+      )}
 
       <div ref={sentinelRef} className="h-1"></div>
 

src/components/Files/index.jsx

@@ -10,7 +10,7 @@ import { useParams } from "react-router-dom";
 import classNames from "classnames";
 
 const Files = memo(() => {
-  const { data: files } = useFiles();
+  const { data: files } = useFiles(false);
   const parent = useSelector((state) => state.parent.parent);
   const listView = useSelector((state) => state.filter.listView);
   // TODO: Fix loading

src/components/Folders/index.jsx

@@ -8,7 +8,7 @@ import classNames from "classnames";
 import { useUtils } from "../../hooks/utils";
 
 const Folders = memo(() => {
-  const { data: folders } = useFolders();
+  const { data: folders } = useFolders(false);
   const { isHome } = useUtils();
   const sortBy = useSelector((state) => state.filter.sortBy);
   const dispatch = useDispatch();

src/components/LeftSection/LeftSection.jsx

@@ -81,13 +81,13 @@ const LeftSection = (props) => {
           </div>
         </div>
         <div className="border-t border-[#E8EEF2] pr-[20px] pt-4">
-          <ul className="m-0 list-none p-0 cursor-pointer">
+          <ul className="m-0 list-none p-0 cursor-pointer ">
             <li>
               <a
                 onClick={goTrash}
                 className={classNames(
                   "flex items-center text-[#3c85ee] font-medium no-underline animate",
-                  isTrash ? "text-[#3c85ee]" : "text-[#637381]"
+                  isTrash ? "text-red-500" : "text-[#637381]"
                 )}
               >
                 <span>

src/components/MultiSelectBar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { resetMultiSelect } from "../../reducers/selected";
 import Swal from "sweetalert2";
@@ -11,12 +11,17 @@ import { useFilesClient, useQuickFilesClient } from "../../hooks/files";
 import { useFoldersClient } from "../../hooks/folders";
 import TrashIcon from "../../icons/TrashIcon";
 import Moveicon from "../../icons/MoveIcon";
-import { deleteItemsPopup, restoreItemsPopup } from "../../popups/file";
+import {
+  deleteItemsPopup,
+  restoreItemsPopup,
+  trashItemsPopup,
+} from "../../popups/file";
 import RestoreIcon from "../../icons/RestoreIcon";
 import { useUtils } from "../../hooks/utils";
 
 const MultiSelectBar = () => {
   const dispatch = useAppDispatch();
+  const ignoreFirstMount = useRef(true);
   const multiSelectMode = useAppSelector(
     (state) => state.selected.multiSelectMode
   );
@@ -32,20 +37,20 @@ const MultiSelectBar = () => {
 
   const { isTrash } = useUtils();
 
+  useEffect(() => {
+    if (ignoreFirstMount.current) {
+      ignoreFirstMount.current = false;
+    } else {
+      closeMultiSelect();
+    }
+  }, [isTrash]);
+
   const closeMultiSelect = () => {
     dispatch(resetMultiSelect());
   };
 
   const trashItems = async () => {
-    const result = await Swal.fire({
-      title: "Move to trash?",
-      text: "Items in the trash will eventually be deleted.",
-      icon: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#3085d6",
-      cancelButtonColor: "#d33",
-      confirmButtonText: "Yes",
-    });
+    const result = await trashItemsPopup();
 
     if (result) {
       const itemsToTrash = Object.values(multiSelectMap);
@@ -99,7 +104,13 @@ const MultiSelectBar = () => {
 
           <div className="flex flex-row items-center">
             {!isTrash && (
-              <TrashIcon className="ml-4 cursor-pointer" onClick={trashItems} />
+              <React.Fragment>
+                <TrashIcon
+                  className="ml-4 cursor-pointer"
+                  onClick={trashItems}
+                />
+                <Moveicon className="ml-4 cursor-pointer" onClick={() => {}} />
+              </React.Fragment>
             )}
             {isTrash && (
               <React.Fragment>
@@ -113,10 +124,6 @@ const MultiSelectBar = () => {
                 />
               </React.Fragment>
             )}
-
-            {!isTrash && (
-              <Moveicon className="ml-4 cursor-pointer" onClick={() => {}} />
-            )}
           </div>
         </div>
       </div>

src/components/QuickAccess/index.jsx

@@ -7,7 +7,7 @@ import { useParams } from "react-router-dom";
 import { useUtils } from "../../hooks/utils";
 
 const QuickAccess = memo(() => {
-  const { data: quickfilesList } = useQuickFiles();
+  const { data: quickfilesList } = useQuickFiles(false);
   const [quickAccessExpanded, setQuickAccessExpanded] = useState(false);
   const { isHome } = useUtils();