It looks like this loading screen is only shown once, the first time the user clicks 'swaps'. On subsequent navigations to the swaps page, it will show the maintenance page or the build quote page immediately while it checks the API liveness in the background.

Was this intended? At the very least it's probably worth showing the loading screen if the last check showed the API as down.

I had the same thought as you at first, but we actually clean up a Swaps state by calling the prepareToLeaveSwaps function from various places, e.g. here: https://github.com/MetaMask/metamask-extension/blob/develop/ui/app/pages/swaps/index.js#L178
prepareToLeaveSwaps calls the resetBackgroundSwapsState function and that one calls resetSwapsState every time a user leaves the Swaps feature. That will set the isFeatureFlagLoaded flag to false.

I've just tried this by going back by 3 different ways: clicking on Cancel, clicking on the Fox head and clicking on the "Close" button on the "Offline for maintenance" page and then every time I click on "Swaps" from the main page, I can see the page loader again.

Huh, I hadn't realized. Good to know!

Does this need to be background state? 🤔 It seems to only be used in one UI component. Maybe it could be migrated to component state - set to false when the component mounts, and true when the fetchSwapsLiveness call resolves. That would make it easier to use the loading screen in more cases as well.

That's right that it's only used in one UI component. What do you think about my code below? I'm using a recommended way to make async calls from the useEffect function: https://stackoverflow.com/questions/53332321/react-hook-warnings-for-async-function-in-useeffect-useeffect-function-must-ret

const [isFeatureFlagLoaded, setIsFeatureFlagLoaded] = useState(false);

useEffect(() => {
    const fetchSwapsLivenessWrapper = async () => {
      await dispatch(fetchSwapsLiveness());
      setIsFeatureFlagLoaded(true);
    };
    fetchSwapsLivenessWrapper();
  }, []);

useEffect certainly seems appropriate!

The pattern you're using here with a "wrapper" function seems a bit odd. I don't follow what the wrapper is for 🤔

Without it React shows a warning:

When I use the wrapper, no warning :)

Got it, that makes sense.