[BUG]: Memoize TRPC call within store to populate branches

[ttebify]

Describe the bug

I noticed an issue with our current implementation of the zustand branches store. Currently, the query that sets the branches to the store is made only on the /projects/[slug]/index.tsx page, which works well. However, when a user goes to a page that needs the branch store without navigating from /projects/[slug]/index.tsx, the store is empty.

Steps to reproduce

1. Go to the /projects/[slug]/index.tsx page.
2. Check that the branches store is correctly initialized and has data by visiting the branches.
3. Navigate to another page that requires the branches store, without first going to /projects/[slug]/index.tsx. For instance, you can copy and paste the URL of the "create new pull request" page into your browser and open it.
4. Verify that the branches store is empty.

Expected behavior

I think we should create a memoized TRPC call within the store to populate the branches, instead of making the query only on the index page. The memoized call will ensure that the data is cached and only fetched when necessary, improving performance.

We should initialise the store before using it, but we shouldn't load it globally. We can do this by creating an initialise function that is called only when needed.

The API could look like this:

const { branches, baseBranch, setBaseBranch } = useBranchesStore({ projectId: xxxxxx });

Screenshots

No response

Additional information

No response