Client: Added lazy-loading for filter drop downs

Donkie · Sep 16, 2023 · 91e4171 · 91e4171
1 parent 58fdbb4
commit 91e4171
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/client/src/components/column.tsx b/client/src/components/column.tsx
@@ -1,4 +1,4 @@
-import { Col, Row, Table } from "antd";
+import { Col, Row, Spin, Table } from "antd";
 import { ColumnProps as AntdColumnProps } from "antd/es/table";
 import { ColumnFilterItem } from "antd/es/table/interface";
 import { getFiltersForField, typeFilters } from "../utils/filtering";
@@ -16,6 +16,17 @@ import { UseQueryResult } from "@tanstack/react-query";
 
 dayjs.extend(utc);
 
+const FilterDropdownLoading = () => {
+  return (
+    <Row justify="center">
+      <Col>
+        Loading...
+        <Spin style={{ margin: 10 }} />
+      </Col>
+    </Row>
+  );
+};
+
 interface BaseColumnProps<Obj> {
   id: keyof Obj & string;
   dataId?: keyof Obj & string;
@@ -30,6 +41,8 @@ interface FilteredColumnProps {
   filters?: ColumnFilterItem[];
   filteredValue?: string[];
   allowMultipleFilters?: boolean;
+  onFilterDropdownOpen?: () => void;
+  loadingFilters?: boolean;
 }
 
 interface CustomColumnProps<Obj> {
@@ -61,6 +74,14 @@ function Column<Obj>(props: BaseColumnProps<Obj> & FilteredColumnProps & CustomC
   if (props.filters && props.filteredValue) {
     columnProps.filters = props.filters;
     columnProps.filteredValue = props.filteredValue;
+    if (props.loadingFilters) {
+      columnProps.filterDropdown = <FilterDropdownLoading />;
+    }
+    columnProps.onFilterDropdownOpenChange = (open) => {
+      if (open && props.onFilterDropdownOpen) {
+        props.onFilterDropdownOpen();
+      }
+    };
     if (props.dataId) {
       columnProps.key = props.dataId;
     }
@@ -115,7 +136,11 @@ export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) {
   const typedFilters = typeFilters<Obj>(props.tableState.filters);
   const filteredValue = getFiltersForField(typedFilters, props.dataId ?? props.id);
 
-  return Column({ ...props, filters, filteredValue });
+  const onFilterDropdownOpen = () => {
+    query.refetch();
+  };
+
+  return Column({ ...props, filters, filteredValue, onFilterDropdownOpen, loadingFilters: query.isLoading });
 }
 
 interface NumberColumnProps<Obj> extends BaseColumnProps<Obj> {
@@ -188,10 +213,16 @@ export function SpoolIconColumn<Obj>(props: SpoolIconColumnProps<Obj>) {
   const typedFilters = typeFilters<Obj>(props.tableState.filters);
   const filteredValue = getFiltersForField(typedFilters, props.dataId ?? props.id);
 
+  const onFilterDropdownOpen = () => {
+    query.refetch();
+  };
+
   return Column({
     ...props,
     filters,
     filteredValue,
+    onFilterDropdownOpen,
+    loadingFilters: query.isLoading,
     onCell: () => {
       return {
         style: {

diff --git a/client/src/components/otherModels.tsx b/client/src/components/otherModels.tsx
@@ -6,6 +6,7 @@ import { ColumnFilterItem } from "antd/es/table/interface";
 export function useSpoolmanFilamentFilter() {
   const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<IFilament[], unknown, ColumnFilterItem[]>({
+    enabled: false,
     queryKey: ["filaments"],
     queryFn: async () => {
       const response = await fetch(apiEndpoint + "/filament");
@@ -46,6 +47,7 @@ export function useSpoolmanFilamentFilter() {
 export function useSpoolmanFilamentNames() {
   const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<IFilament[], unknown, string[]>({
+    enabled: false,
     queryKey: ["filaments"],
     queryFn: async () => {
       const response = await fetch(apiEndpoint + "/filament");
@@ -74,6 +76,7 @@ export function useSpoolmanFilamentNames() {
 export function useSpoolmanVendors() {
   const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<IVendor[], unknown, string[]>({
+    enabled: false,
     queryKey: ["vendors"],
     queryFn: async () => {
       const response = await fetch(apiEndpoint + "/vendor");
@@ -95,6 +98,7 @@ export function useSpoolmanVendors() {
 export function useSpoolmanMaterials() {
   const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<string[]>({
+    enabled: false,
     queryKey: ["materials"],
     queryFn: async () => {
       const response = await fetch(apiEndpoint + "/material");
@@ -112,6 +116,7 @@ export function useSpoolmanMaterials() {
 export function useSpoolmanArticleNumbers() {
   const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<string[]>({
+    enabled: false,
     queryKey: ["articleNumbers"],
     queryFn: async () => {
       const response = await fetch(apiEndpoint + "/article-number");
@@ -129,6 +134,7 @@ export function useSpoolmanArticleNumbers() {
 export function useSpoolmanLotNumbers() {
   const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<string[]>({
+    enabled: false,
     queryKey: ["lotNumbers"],
     queryFn: async () => {
       const response = await fetch(apiEndpoint + "/lot-number");
@@ -146,6 +152,7 @@ export function useSpoolmanLotNumbers() {
 export function useSpoolmanLocations() {
   const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<string[]>({
+    enabled: false,
     queryKey: ["locations"],
     queryFn: async () => {
       const response = await fetch(apiEndpoint + "/location");