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();
 

src/hooks/files.ts

@@ -16,7 +16,7 @@ import { useSelector } from "react-redux";
 import { useAppSelector } from "./store";
 import { useUtils } from "./utils";
 
-export const useFiles = () => {
+export const useFiles = (enabled = true) => {
   const params = useParams();
   // TODO: Remove any
   const sortBy = useSelector((state: any) => state.filter.sortBy);
@@ -42,6 +42,7 @@ export const useFiles = () => {
           startAtName: lastElement.filename,
         };
       },
+      enabled,
     }
   );
 
@@ -77,8 +78,10 @@ export const useFilesClient = () => {
   return { ...filesReactClientQuery, invalidateFilesCache };
 };
 
-export const useQuickFiles = () => {
-  const quickFilesQuery = useQuery("quickFiles", getQuickFilesListAPI);
+export const useQuickFiles = (enabled = true) => {
+  const quickFilesQuery = useQuery("quickFiles", getQuickFilesListAPI, {
+    enabled,
+  });
 
   return { ...quickFilesQuery };
 };

src/hooks/folders.ts

@@ -4,7 +4,7 @@ import { getFolderInfoAPI, getFoldersListAPI } from "../api/foldersAPI";
 import { useSelector } from "react-redux";
 import { useUtils } from "./utils";
 
-export const useFolders = () => {
+export const useFolders = (enabled = true) => {
   const params = useParams();
   const sortBy = useSelector((state: any) => state.filter.sortBy);
   const { isTrash } = useUtils();
@@ -19,7 +19,8 @@ export const useFolders = () => {
         trashMode: isTrash,
       },
     ],
-    getFoldersListAPI
+    getFoldersListAPI,
+    { enabled }
   );
 
   return { ...foldersReactQuery };

src/icons/DownloadIcon.tsx

@@ -1,8 +1,6 @@
-interface DownloadIconProps {
-  className?: string;
-}
+type DownloadIconType = React.SVGAttributes<SVGSVGElement>;
 
-const DownloadIcon = (props: DownloadIconProps) => {
+const DownloadIcon: React.FC<DownloadIconType> = (props) => {
   return (
     <svg
       width="19"
@@ -10,7 +8,7 @@ const DownloadIcon = (props: DownloadIconProps) => {
       viewBox="0 0 19 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={props.className}
+      {...props}
     >
       <g id="cloud-computing">
         <path

src/icons/HomeListIcon.tsx

@@ -1,8 +1,6 @@
-export interface HomeListIconProps {
-  className?: string;
-}
+type HomeIconType = React.SVGAttributes<SVGSVGElement>;
 
-const HomeListIcon = (props: HomeListIconProps) => {
+const HomeListIcon: React.FC<HomeIconType> = (props) => {
   return (
     <svg
       width="18"
@@ -10,7 +8,7 @@ const HomeListIcon = (props: HomeListIconProps) => {
       viewBox="0 0 18 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={props.className}
+      {...props}
     >
       <g id="Group 11">
         <path

src/icons/MoveIcon.tsx

@@ -1,9 +1,6 @@
-interface MoveiconProps {
-  className?: string;
-  onClick?: () => void;
-}
+type MoveIconType = React.SVGAttributes<SVGSVGElement>;
 
-const Moveicon = (props: MoveiconProps) => {
+const Moveicon: React.FC<MoveIconType> = (props) => {
   return (
     <svg
       width="19"
@@ -11,8 +8,7 @@ const Moveicon = (props: MoveiconProps) => {
       viewBox="0 0 19 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={props.className}
-      onClick={props.onClick}
+      {...props}
     >
       <path
         id="Combined Shape"

src/icons/MultiSelectIcon.tsx

@@ -1,8 +1,6 @@
-interface MultiSelectIconProps {
-  className?: string;
-}
+type MultiSelectIconType = React.SVGAttributes<SVGSVGElement>;
 
-const MultiSelectIcon = (props: MultiSelectIconProps) => {
+const MultiSelectIcon: React.FC<MultiSelectIconType> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/icons/PlayIcon.tsx

@@ -1,14 +1,8 @@
-interface PlayIconProps {
-  className?: string;
-}
+type PlayIconType = React.SVGAttributes<SVGSVGElement>;
 
-const PlayIcon = (props: PlayIconProps) => {
+const PlayIcon: React.FC<PlayIconType> = (props) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      className={props.className}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
       <title>play</title>
       <path d="M8,5.14V19.14L19,12.14L8,5.14Z" fill="currentColor" />
     </svg>

src/icons/RenameIcon.tsx

@@ -1,8 +1,6 @@
-interface RenameIconProps {
-  className?: string;
-}
+type RenameIconType = React.SVGAttributes<SVGSVGElement>;
 
-const RenameIcon = (props: RenameIconProps) => {
+const RenameIcon: React.FC<RenameIconType> = (props) => {
   return (
     <svg
       width="19"
@@ -10,7 +8,7 @@ const RenameIcon = (props: RenameIconProps) => {
       viewBox="0 0 19 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={props.className}
+      {...props}
     >
       <path
         id="Combined Shape"

src/icons/RestoreIcon.tsx

@@ -1,15 +1,12 @@
-interface RestoreIconProps {
-  className?: string;
-  onClick?: () => void;
-}
+type RestoreIconType = React.SVGAttributes<SVGSVGElement>;
 
-const RestoreIcon = (props: RestoreIconProps) => {
+const RestoreIcon: React.FC<RestoreIconType> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       className={props.className}
-      onClick={props.onClick}
+      {...props}
     >
       <title>restore</title>
       <path

src/icons/ShareIcon.tsx

@@ -1,8 +1,6 @@
-interface ShareIconProps {
-  className?: string;
-}
+type ShareIconType = React.SVGAttributes<SVGSVGElement>;
 
-const ShareIcon = (props: ShareIconProps) => {
+const ShareIcon: React.FC<ShareIconType> = (props) => {
   return (
     <svg
       width="17"
@@ -10,7 +8,7 @@ const ShareIcon = (props: ShareIconProps) => {
       viewBox="0 0 17 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={props.className}
+      {...props}
     >
       <g id="share-3">
         <path

src/icons/TrashIcon.tsx

@@ -1,9 +1,8 @@
-interface TrashIconProps {
-  className?: string;
-  onClick?: () => void;
-}
+import React from "react";
 
-const TrashIcon = (props: TrashIconProps) => {
+type TrashIconType = React.SVGAttributes<SVGSVGElement>;
+
+const TrashIcon: React.FC<TrashIconType> = (props) => {
   return (
     <svg
       width="17"
@@ -11,8 +10,7 @@ const TrashIcon = (props: TrashIconProps) => {
       viewBox="0 0 17 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={props.className}
-      onClick={props.onClick}
+      {...props}
     >
       <g id="trash">
         <path

src/popups/file.ts

@@ -36,3 +36,16 @@ export const deleteItemsPopup = async () => {
   });
   return result.value;
 };
+
+export const trashItemsPopup = 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",
+  });
+  return result.value;
+};