API integration

Dialogs often need data supplied to it from an API endpoint. The challenge is displaying the dialog in a loading state while the user waits for the API data to load behind the scenes.

How to do it...

Let's say that your application needs to display a dialog with a Select component for selecting an item. The options for the select are populated from an API endpoint, so you need to handle the latency between the user opening the dialog and the API data arriving. Here's an example that shows one way to do this:

import React, { Fragment, useState } from 'react';

import { makeStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
import DialogTitle...