How can I create a grouped list from a dataset?

I have a database of chapters of an organization.
And I need to create a page listing the branches as shown below grouped by state.

  • Alabama
    • Montgomery branch, 162 members
    • Huntsville branch, 98 members
  • Arizona
    • Phoenix Chapter, 34 members
  • Arkansas
    • Little Rock Branch, 56

(Alaska has no branches).

So I could create and display a dataset and repeater for each state.
But unfortunately that takes a very long time to display. Maybe because it is processing the number of states when the original collection is only one.
Does anyone have any good advice?

For me, it would be nice if I could filter the repeaters after the dataset of the list of all the branches in one is loaded on the page.

(This text is made at DeepL, so I apologize if it is difficult to understand.)

I am not confident because of my low knowledge of JavaScript as well as Velo, but I will try the following policy.

  1. create an array (branchesList) of a list of all branches from the dataset
  2. use method chaining in promise based on branchesList. Create an array for each state and pass it to the repeater.

And it worked.
(Even if there is a more efficient way.)