JoinColony / colonyCDapp

An iteration of the Colony Dapp sporting both a fully decentralized operating mode, as well as a mode enhanced by a metadata caching layer
5 stars 14 forks source link

Fix: Prevent the loader from rendering more than once on page load #3671

Closed rumzledz closed 1 week ago

rumzledz commented 1 week ago

Description

[!NOTE] I appreciate that this may be more of a band-aid solution 🩹

Justification is that, this hook sits on a top-level component and it only ever makes a network request again when the colonyName changes i.e. when you switch Colonies.

colonyName is plucked directly from the URL via useParams() so it should remain constant whilst you're browsing the same Colony.

The issue is that nextFetchPolicy is causing the useGetFullColonyByNameQuery() hook to make the request twice as soon at it gets invoked:

} = useGetFullColonyByNameQuery({
  variables: {
    name: colonyName,
  },
  fetchPolicy: 'network-only',
  nextFetchPolicy: 'cache-only' // <<-- This one
});

Which then causes this component to render twice:

if (
  walletConnecting ||
  isColonyLoading ||
  userLoading ||
  isContributorLoading
) {
  return <LoadingTemplate loadingText={MSG.loadingText} />;
}

Testing

  1. Directly visit a colony: http://localhost:9091/planex/
  2. Verify that the following loader only shows up once:
image

Resolves #3662