diff --git a/.changeset/brave-moons-smell.md b/.changeset/brave-moons-smell.md new file mode 100644 index 0000000000..3a11f9436f --- /dev/null +++ b/.changeset/brave-moons-smell.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": patch +--- + +fix(admin-ui): prevent Timeline flickering while loading diff --git a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx index 620e791c6d..d7fba0ec99 100644 --- a/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx +++ b/packages/admin-ui/ui/src/components/molecules/timeline-events/order-edit/created.tsx @@ -3,7 +3,6 @@ import { useAdminCancelOrderEdit, useAdminConfirmOrderEdit, useAdminDeleteOrderEdit, - useAdminOrderEdit, useAdminUser, } from "medusa-react" import React, { useContext } from "react" @@ -48,9 +47,9 @@ const EditCreated: React.FC = ({ event }) => { const { isModalVisible, showModal, setActiveOrderEdit } = useContext(OrderEditContext) - const { order_edit: orderEdit, isFetching } = useAdminOrderEdit(event.edit.id) + const orderEdit = event.edit - const { type, user_id } = getInfo(orderEdit || event.edit) + const { type, user_id } = getInfo(orderEdit) const notification = useNotification() @@ -60,9 +59,9 @@ const EditCreated: React.FC = ({ event }) => { const forceConfirmDialog = useImperativeDialog() - const deleteOrderEdit = useAdminDeleteOrderEdit(event.edit.id) - const cancelOrderEdit = useAdminCancelOrderEdit(event.edit.id) - const confirmOrderEdit = useAdminConfirmOrderEdit(event.edit.id) + const deleteOrderEdit = useAdminDeleteOrderEdit(orderEdit.id) + const cancelOrderEdit = useAdminCancelOrderEdit(orderEdit.id) + const confirmOrderEdit = useAdminConfirmOrderEdit(orderEdit.id) const onDeleteOrderEditClicked = () => { deleteOrderEdit.mutate(undefined, { @@ -120,7 +119,7 @@ const EditCreated: React.FC = ({ event }) => { } // hide last created edit while editing and prevent content flashing while loading - if ((isModalVisible && orderEdit?.status === "created") || isFetching) { + if (isModalVisible && orderEdit?.status === "created") { return null } diff --git a/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx b/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx index 78be8c1e1a..8c2cc41aa9 100644 --- a/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx +++ b/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx @@ -162,15 +162,20 @@ export interface NotificationEvent extends TimelineEvent { export const useBuildTimeline = (orderId: string) => { const { orderRelations } = useOrdersExpandParam() - const { order, refetch } = useAdminOrder(orderId, { + const { + order, + refetch, + isLoading: isOrderLoading, + } = useAdminOrder(orderId, { expand: orderRelations, }) - const { order_edits: edits } = useAdminOrderEdits({ order_id: orderId }) + const { order_edits: edits, isLoading: isOrderEditsLoading } = + useAdminOrderEdits({ order_id: orderId }) const { isFeatureEnabled } = useFeatureFlag() - const { notes } = useAdminNotes({ + const { notes, isLoading: isNotesLoading } = useAdminNotes({ resource_id: orderId, limit: 100, offset: 0, @@ -185,6 +190,10 @@ export const useBuildTimeline = (orderId: string) => { return undefined } + if (isOrderLoading || isNotesLoading || isOrderEditsLoading) { + return undefined + } + let allItems = [...order.items] if (order.swaps && order.swaps.length) { @@ -541,9 +550,21 @@ export const useBuildTimeline = (orderId: string) => { events[events.length - 1].first = true return events - }, [order, edits, notes, notifications, isFeatureEnabled]) + }, [ + order, + edits, + notes, + notifications, + isFeatureEnabled, + isOrderLoading, + isNotesLoading, + isOrderEditsLoading, + ]) - return { events, refetch } + return { + events, + refetch, + } } function getLineItem(allItems, itemId) {