perf(dashboard): lazy load order details only when needed; skip fetch on non-order tabs
This commit is contained in:
parent
44d3f0f16d
commit
fefb8065be
|
|
@ -1,8 +1,8 @@
|
|||
const isLocalhost = self.location.hostname === "localhost" || self.location.hostname === "127.0.0.1";
|
||||
|
||||
if (!isLocalhost) {
|
||||
const STATIC_CACHE = "construction-delivery-static-v97";
|
||||
const RUNTIME_CACHE = "construction-delivery-runtime-v97";
|
||||
const STATIC_CACHE = "construction-delivery-static-v98";
|
||||
const RUNTIME_CACHE = "construction-delivery-runtime-v98";
|
||||
const APP_SHELL_URLS = ["/", "/index.html", "/manifest.webmanifest", "/icons/icon-192.png", "/icons/icon-512.png"];
|
||||
|
||||
self.addEventListener("install", (event) => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
} from "../services/orderGroupViews";
|
||||
import { getErrorMessage } from "../utils/deliveryUtils";
|
||||
|
||||
export const useOrderGroups = () => {
|
||||
export const useOrderGroups = ({ enabled = true, details = false } = {}) => {
|
||||
const [orderGroups, setOrderGroups] = React.useState(() => []);
|
||||
const FILTERS_STORAGE_KEY = "supersam_order_filters";
|
||||
const [filters, setFilters] = React.useState(() => {
|
||||
|
|
@ -27,7 +27,7 @@ export const useOrderGroups = () => {
|
|||
} catch (e) {}
|
||||
}, [filters]);
|
||||
const [selectedOrderGroupId, setSelectedOrderGroupId] = React.useState(null);
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const [isLoading, setIsLoading] = React.useState(enabled);
|
||||
const [loadError, setLoadError] = React.useState("");
|
||||
const [isSavingDeliveryChoice, setIsSavingDeliveryChoice] = React.useState(false);
|
||||
const [isSavingDriverAssignment, setIsSavingDriverAssignment] = React.useState(false);
|
||||
|
|
@ -39,7 +39,9 @@ export const useOrderGroups = () => {
|
|||
}
|
||||
setLoadError("");
|
||||
|
||||
const groupsResult = await fetchOrderGroups();
|
||||
if (!enabled) { setOrderGroups([]); setIsLoading(false); return; }
|
||||
|
||||
const groupsResult = await fetchOrderGroups({ details });
|
||||
|
||||
if (!groupsResult) {
|
||||
return;
|
||||
|
|
@ -54,7 +56,7 @@ export const useOrderGroups = () => {
|
|||
|
||||
setOrderGroups(groupsResult.data || []);
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
}, [enabled, details]);
|
||||
|
||||
// Initial load
|
||||
React.useEffect(() => {
|
||||
|
|
@ -64,18 +66,19 @@ export const useOrderGroups = () => {
|
|||
await loadLiveData(true);
|
||||
if (cancelled) return;
|
||||
};
|
||||
doLoad();
|
||||
if (enabled) doLoad(); else { setOrderGroups([]); setIsLoading(false); }
|
||||
return () => { cancelled = true; };
|
||||
}, [loadLiveData]);
|
||||
}, [loadLiveData, enabled]);
|
||||
|
||||
// Refetch on window focus to keep data fresh across tabs/pages
|
||||
React.useEffect(() => {
|
||||
if (!enabled) return undefined;
|
||||
const handleFocus = () => {
|
||||
loadLiveData(false); // silent refetch, no loading spinner
|
||||
};
|
||||
window.addEventListener("focus", handleFocus);
|
||||
return () => window.removeEventListener("focus", handleFocus);
|
||||
}, [loadLiveData]);
|
||||
}, [loadLiveData, enabled]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!orderGroups.length) {
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export const DashboardPage = () => {
|
|||
statusOptions,
|
||||
isLoading,
|
||||
loadError,
|
||||
} = useOrderGroups();
|
||||
} = useOrderGroups({ enabled: ["orders", "logistics", "deliveries"].includes(activeSection), details: false });
|
||||
|
||||
// ── Derived City List ─────────────────────────────────────────────────────
|
||||
const cities = React.useMemo(() => {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const GroupDetailPage = () => {
|
|||
saveShipmentData,
|
||||
isLoading,
|
||||
refetch,
|
||||
} = useOrderGroups();
|
||||
} = useOrderGroups({ details: true });
|
||||
|
||||
// ── Drivers ────────────────────────────────────────────────────────────────
|
||||
const [drivers, setDrivers] = React.useState([]);
|
||||
|
|
|
|||
|
|
@ -286,6 +286,7 @@ export const mapOrderGroupRowToDeliveryGroup = (row) => {
|
|||
};
|
||||
|
||||
const ORDER_GROUP_SELECT_FIELDS = `id, group_key, order_numbers, status, delivery_status, sms_sent_at, created_at, updated_at, created_from_exchange_at, source_key, customer_name, customer_phone, customer_phone_normalized, customer_date, orders_total, orders_ready, orders_not_ready, source_orders, order_list, order_list_structured, delivery_invitation_id, delivery_link, delivery_link_code, notification_status, sms_attempts, first_sms_sent_at, second_sms_sent_at, last_sms_error, next_notification_check_at, delivery_date, delivery_time, delivery_address, customer_address, delivery_date_source, manual_confirmation_at, paid_storage_at, assigned_driver_id, assigned_driver:users!order_groups_assigned_driver_id_fkey(id, name), driver_shipment_data, delivery_type, pickup_date, pickup_time_slot, has_delivery_problem, delivery_problem_note, pickup_code, synced_to_1c_at, manager_name, manager_email, manager_tel, payed_ship, is_payed_ship, delivery_invitation:delivery_invitations!order_groups_delivery_invitation_id_fkey(opened_at, access_count, last_accessed_at), called, called_at, called_comment, order_history(id, action, old_status, new_status, user_id, metadata, created_at)`;
|
||||
const ORDER_GROUP_LIST_SELECT_FIELDS = `id, group_key, order_numbers, status, delivery_status, sms_sent_at, created_at, updated_at, created_from_exchange_at, source_key, customer_name, customer_phone, customer_phone_normalized, customer_date, orders_total, orders_ready, orders_not_ready, notification_status, first_sms_sent_at, second_sms_sent_at, delivery_date, delivery_time, delivery_address, customer_address, delivery_date_source, manual_confirmation_at, paid_storage_at, assigned_driver_id, assigned_driver:users!order_groups_assigned_driver_id_fkey(id, name), driver_shipment_data, delivery_type, pickup_date, pickup_time_slot, has_delivery_problem, delivery_problem_note, pickup_code, synced_to_1c_at, manager_name, manager_email, manager_tel, payed_ship, is_payed_ship, called, called_at, called_comment`;
|
||||
|
||||
export const updateOrderGroupDeliveryChoice = async ({
|
||||
orderGroupId,
|
||||
|
|
@ -562,12 +563,12 @@ export const updateDeliveryStatus = async ({ orderGroupId, status, details, ship
|
|||
}, "Ошибка обновления статуса доставки");
|
||||
};
|
||||
|
||||
export const fetchOrderGroups = async () => {
|
||||
export const fetchOrderGroups = async ({ details = true } = {}) => {
|
||||
return safeSupabaseCall(async () => {
|
||||
const client = requireSupabase();
|
||||
const { data, error } = await client
|
||||
.from("order_groups")
|
||||
.select(ORDER_GROUP_SELECT_FIELDS)
|
||||
.select(details ? ORDER_GROUP_SELECT_FIELDS : ORDER_GROUP_LIST_SELECT_FIELDS)
|
||||
.order("updated_at", { ascending: false });
|
||||
|
||||
if (error) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue