Implement animated list reordering for quote list

[woodenfurniture]

Overview

Basically we want to keep quotes mounted and re-load their contents across different trade inputs, similar to how polling works presently. If the order changes, animate it rather than layout-shift abruptly.

Currently the list of received quotes is somewhat visually jarring because we arent able to persist a quote for a given swapper across different inputs. Instead, re re-mount a new component for every new input which creates a layout shift.

Additionally, the capability of displaying multiple quotes per swapper means we'd need to manage the visibility of these as different quotes become available and unavailable depending on the input.

References and additional details

Refactor the TradeQuotes component to persist a singular TradeQuote component per quote identifier. If the identifier is not present in the list of quotes, hide it but don't unmount it. Consider using animation to show and hide these to reduce visual jarring.

Use framer-motion MotionBox to manage animation of quote position without layout shifting

import { motion } from 'framer-motion';

const MotionBox = motion(Box);

// Inside your component's return statement
{listItems.map((item, index) => (
  <MotionBox
    key={item.id}
    layout
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    p={5}
    shadow='md'
    borderWidth='1px'
  >
    {item.content}
  </MotionBox>
))}

Acceptance Criteria

• Quotes of the same identifier persist across different trade inputs with loading state between fetches.
• If a quote matching an identifier is not available for a given input, hide it but don't unmount it
• When quotes load with different ordering, animate the change in order to reduce visual jarring

Need By Date

No response

Screenshots/Mockups

No response

Estimated effort

No response