Implementing React's useTransition Hook for Improved UI Responsiveness

React's useTransition hook allows you to mark state updates as non-urgent, preventing them from blocking the UI thread and leading to a smoother user experience. This challenge asks you to build a component that utilizes useTransition to update a list of items while maintaining a responsive UI, even during potentially long updates. This is crucial for applications where frequent updates can impact perceived performance.

Problem Description

You are tasked with creating a ListUpdater component that displays a list of items and allows the user to add new items to the list. The addition of a new item should be handled using useTransition to ensure that the UI remains responsive during the update, even if adding the item involves a time-consuming operation (simulated in this case).

What needs to be achieved:

• Create a React component ListUpdater that displays a list of strings.
• Implement a button that, when clicked, adds a new string to the list.
• Use useTransition to mark the state update as non-urgent.
• While the transition is pending, display a loading indicator (e.g., "Updating...").
• Once the transition is complete, update the list with the new item.

Key Requirements:

• The component must use TypeScript.
• The component must correctly utilize useTransition and useDeferredState (or equivalent) to manage the state update.
• The UI must remain responsive during the state update. Clicking other elements or interacting with the component should not be blocked.
• A loading indicator must be displayed while the transition is pending.
• The list should be updated correctly after the transition completes.

Expected Behavior:

1. Initially, the component displays an empty list or a pre-populated list of strings.
2. When the "Add Item" button is clicked:
   • A loading indicator ("Updating...") is immediately displayed.
   • The UI remains responsive – the user can still interact with other elements on the page.
   • After a simulated delay (e.g., 1 second), the new item is added to the list, and the loading indicator disappears.
3. The updated list is displayed.

Edge Cases to Consider:

• What happens if the state update fails? (For simplicity, you don't need to handle errors explicitly, but consider how the loading indicator would behave).
• How does the component behave if the user clicks the "Add Item" button multiple times in quick succession? (The transitions should queue up correctly).

Examples

Example 1:

Input: Initial list: ["Item 1", "Item 2"]; User clicks "Add Item" button.
Output:  UI displays "Updating..." immediately. After 1 second, the list updates to ["Item 1", "Item 2", "New Item"].
Explanation: The `useTransition` hook marks the state update as non-urgent, allowing the UI to remain responsive while the state is updated. The loading indicator provides feedback to the user.

Example 2:

Input: Initial list: []; User clicks "Add Item" button multiple times in rapid succession.
Output: UI displays "Updating..." immediately.  Subsequent clicks do not block the UI. After 1 second, the list updates to ["New Item 1"]. After another second, the list updates to ["New Item 1", "New Item 2"].
Explanation: `useTransition` queues the transitions, ensuring that each update is handled without blocking the UI.

Constraints

• The simulated delay for adding an item should be approximately 1 second.
• The component should be relatively simple and focused on demonstrating the use of useTransition.
• The list should be displayed using a standard React list rendering technique (e.g., .map()).
• The component should be functional and written in TypeScript.

Notes

• You can use setTimeout to simulate a time-consuming operation.
• Consider using useState to manage the list of items.
• The loading indicator can be a simple text string or a more elaborate UI element.
• Focus on demonstrating the core functionality of useTransition – ensuring UI responsiveness during state updates. Error handling and complex UI are not required for this challenge.
• Remember to import useTransition from 'react'.