Handling loading state at the component level

Every component you create must have a loading state, for all UI components adding skeleton is must.

Example

Refer to app\src\pages\Party\Components\TaskView\SingleTaskViewDrawer\SingleTaskView\index.jsx for a reference implementation.

Using loading state from dispatch for one component in a list

Many a times we need to show loading state in a list of components, for example in a list of sub tasks when a subtask is updated we want to show a loading state only for the selected task id, to achieve this use the following snippet.

// Sample method to set the dispatched Task Id
const reopenTask = (id) => {
    dispatch({
      type: 'tasks/setStates',
      payload: id,
      key: 'dispatchedTaskId',
    });
 
    dispatch({ type: 'tasks/reopenTask', payload: { pathParams: { id } } }).then((response) => {
      const taskDetails = parentTaskDetails;
      const idx = taskDetails?.subTasks.findIndex((rec) => rec.id === id);
      taskDetails.subTasks[idx].completed = false;
      updateRecord(taskDetails);
      // update the progress of the parent task.
      if (response.parentProgress) {
        setParentTaskProgress(response.parentProgress);
      }
    });
  };
 
// activity indicator for that task only
<ActivityIndicator loading={(completingTask || reopeningTask) && dispatchedTaskId === subtask.id}>

Loading state testing utility

There's a utility avaialble to test your loading states manually via a toggle switch in development mode, below example illustrates that. Add it to the top of your component and bind it with your loading state handler.

Once you have tested your component please remove it so it doesn't show up for other UIs in development mode.

Usage

To use the LoadingSimulator component, follow these steps:

1. Import the LoadingSimulator component from the appropriate location:

import LoadingSimulator from "@/components/LoadingSimulator";

2. Render the LoadingSimulator component in your JSX and pass the setLoading state as a prop. The setLoading function is used to control the loading state of your application. Here's an example of how you can use the LoadingSimulator component:

const MyComponent = () => {
  const [loading, setLoading] = useState<boolean>(false);
  return (
      {/* Wrap your code with LoadingSimulator component and pass setLoading as a prop */}
      <LoadingSimulator setLoading={setLoading}>
        {/* Your content goes here */}
      </LoadingSimulator>
  );
};

3. Customize the appearance and behavior of the LoadingSimulator component as needed.

Screenshot