fix: Acceleration of the list display before receiving the total count

src-tauri/src/cmds.rs

@@ -125,13 +125,6 @@ pub async fn get_directory_files(
     ])
     .order_by(file::path::order(Direction::Asc));
 
-  // if let Some(path) = cursor_path {
-  //   query = query.cursor(file::path::equals(path)).skip(1)
-  // }
-  // if let Some(s) = skip {
-  //   query = query.skip(s)
-  // }
-
   return match query.skip(skip).take(20).exec().await {
     Ok(files) => Ok(files),
     Err(e) => Err(e.to_string()),

src/components/FilesTable/FilesTable.tsx

@@ -77,7 +77,11 @@ const FilesTable: Component = () => {
   const rowVirtualizer = createVirtualizer({
     getScrollElement: () => bodyTableRef,
     get count() {
-      return metadataFiles()?.total_count ?? 0;
+      if (!metadataFiles.loading) {
+        return metadataFiles()?.total_count || 0;
+      } else {
+        return files()?.length || 0;
+      }
     },
     overscan: 8,
     estimateSize: () => 45,

src/components/FilesTable/hooks/useFilesLoader.ts

@@ -1,19 +1,11 @@
 import {
-  FetchMetadataFilesKeys,
+  ShareDirectoryFilesKeys,
   getDirectoryFiles,
   getMetadataFiles,
-  type FetchDirectoryFilesKeys,
 } from "@/services/filesServices";
 import { MetadataFiles } from "@/services/helpers/helpers";
 import { type File as PrismaFile } from "@prisma/client";
-import {
-  Accessor,
-  Resource,
-  createEffect,
-  createResource,
-  createSignal,
-  on,
-} from "solid-js";
+import { Accessor, Resource, createResource } from "solid-js";
 import { DEFAULT_ITEM_PER_PAGE } from "../constants";
 
 const getCurrentSkipItems = (index: number): number => {
@@ -25,43 +17,33 @@ const getCurrentSkipItems = (index: number): number => {
 interface IFilesLoaderResult {
   files: Resource<PrismaFile[]>;
   metadataFiles: Resource<MetadataFiles>;
-  handleSkipUpdate: (value: number) => number;
+  handleSkipUpdate: (value: number) => void;
 }
 
 const useFilesLoader: (
   paths: Accessor<string[]>,
   search: Accessor<string>
 ) => IFilesLoaderResult = (paths, search) => {
-  const [skip, setSkip] = createSignal(0);
-
   const [metadataFiles] = createResource<
     MetadataFiles,
-    FetchMetadataFilesKeys,
+    ShareDirectoryFilesKeys,
     boolean
   >(() => [paths(), search()], getMetadataFiles);
 
-  const [files, { mutate: mutateFiles }] = createResource<
+  const [files, { refetch: refetchFiles }] = createResource<
     PrismaFile[],
-    FetchDirectoryFilesKeys,
-    boolean
-  >(() => [paths(), search(), skip()], getDirectoryFiles);
-
-  createEffect(
-    on(
-      [paths, search],
-      () => {
-        mutateFiles([]);
-        setSkip(0);
-      },
-      { defer: true }
-    )
-  );
+    ShareDirectoryFilesKeys,
+    number
+  >(() => [paths(), search()], getDirectoryFiles);
 
   return {
     files,
     metadataFiles,
     handleSkipUpdate: (value) => {
-      return setSkip(getCurrentSkipItems(value || 0));
+      const currentSkipItems = getCurrentSkipItems(value || 0);
+      if (currentSkipItems) {
+        refetchFiles(currentSkipItems);
+      }
     },
   };
 };

src/components/Tabs/Tabs.tsx

@@ -32,12 +32,16 @@ const Tabs: FlowComponent<Props, Component<any>> = (props) => {
                 onClick={() => props.setActive(index())}
                 class="tab flex-shrink-0"
                 classList={{
-                  "tab-active": item.active
+                  "tab-active": item.active,
                 }}
               >
-                <label classList={{
-                  "cursor-pointer": !getRenamingMode()
-                }} class="input-sizer" data-value={item.name}>
+                <label
+                  classList={{
+                    "cursor-pointer": !getRenamingMode(),
+                  }}
+                  class="input-sizer"
+                  data-value={item.name}
+                >
                   <input
                     classList={{
                       "pointer-events-none": !getRenamingMode(),
@@ -46,9 +50,10 @@ const Tabs: FlowComponent<Props, Component<any>> = (props) => {
                     type="text"
                     value={item.name}
                     disabled={!getRenamingMode()}
-                    onBlur={(event) => {
+                    onBlur={() => {
                       window.getSelection()?.removeAllRanges(); // TODO: unselectinput
-                      setRenamingMode(false)}}
+                      setRenamingMode(false);
+                    }}
                     onInput={(event) => {
                       tabsStore.rename(index(), event.target.value);
                     }}

src/providers/TabsProvider.tsx

@@ -1,4 +1,5 @@
-import { type Component, createContext, type JSX, useContext } from "solid-js";
+import tabsStore from "@/stores/tabsStore/tabsStore";
+import { createContext, useContext, type Component, type JSX } from "solid-js";
 
 interface TabsStore {}
 const TabsContext = createContext<TabsStore>();

src/services/filesServices.ts

@@ -2,34 +2,41 @@ import { MetadataFiles, paddedSplice } from "@/services/helpers/helpers";
 import { ISearchState } from "@/stores/store";
 import { type File as PrismaFile } from "@prisma/client";
 import { invoke } from "@tauri-apps/api";
+import { isNumber } from "lodash-es";
 import { type ResourceFetcher } from "solid-js";
 
 export type ShareDirectoryFilesKeys = [
   Array<PrismaFile["path"]>,
   ISearchState["search"]
 ];
-export type FetchDirectoryFilesKeys = [...ShareDirectoryFilesKeys, number];
-
-export type FetchMetadataFilesKeys = [...ShareDirectoryFilesKeys];
 
 export const getDirectoryFiles: ResourceFetcher<
-  FetchDirectoryFilesKeys,
+  ShareDirectoryFilesKeys,
   PrismaFile[],
-  boolean
-> = async ([paths, search, skip], info) => {
-  const { value: prevValue } = info;
+  number
+> = async ([paths, search], info) => {
+  const { value: prevValue, refetching } = info;
+
+  if (isNumber(refetching)) {
+    const data = await invoke<PrismaFile[]>("get_directory_files", {
+      paths,
+      search,
+      skip: refetching,
+    });
+    return paddedSplice(prevValue, refetching, data);
+  }
 
   const data = await invoke<PrismaFile[]>("get_directory_files", {
     paths,
     search,
-    skip,
+    skip: 0,
   });
 
-  return paddedSplice(prevValue, skip, data);
+  return data;
 };
 
 export const getMetadataFiles: ResourceFetcher<
-  FetchMetadataFilesKeys,
+  ShareDirectoryFilesKeys,
   MetadataFiles,
   boolean
 > = async ([paths, search]) => {

src/services/storageServices.ts

@@ -3,6 +3,9 @@ export const getPersistentStorage = (key, defaultValue) => {
   return value ? value : defaultValue;
 };
 
-export const setPersistentStorage = (key, value) => {
+export const setPersistentStorage: (key: string, value: object) => void = (
+  key,
+  value
+) => {
   localStorage.setItem(key, JSON.stringify(value));
 };