fix(admin-ui): flickering Timeline (#4231)

* fix(admin-ui): prevent Timeline flickering while loading

* chore: changesets

---------

Co-authored-by: fPolic <frane@medusajs.com>

.changeset/brave-moons-smell.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): prevent Timeline flickering while loading

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<EditCreatedProps> = ({ 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<EditCreatedProps> = ({ event }) => {
 
   const forceConfirmDialog = useImperativeDialog()
 
-  const deleteOrderEdit = useAdminDeleteOrderEdit(event.edit.id)
+  const deleteOrderEdit = useAdminDeleteOrderEdit(orderEdit.id)
-  const cancelOrderEdit = useAdminCancelOrderEdit(event.edit.id)
+  const cancelOrderEdit = useAdminCancelOrderEdit(orderEdit.id)
-  const confirmOrderEdit = useAdminConfirmOrderEdit(event.edit.id)
+  const confirmOrderEdit = useAdminConfirmOrderEdit(orderEdit.id)
 
   const onDeleteOrderEditClicked = () => {
     deleteOrderEdit.mutate(undefined, {
@@ -120,7 +119,7 @@ const EditCreated: React.FC<EditCreatedProps> = ({ 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
   }
 

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) {