Changing global state from child component - elm

Question

I was wondering what would be the preferred way for modifying global state from a child component using TEA.
My use case is having a global loading indicator showing while any json request is in progress.
A google search lead to me this article, but am not 100% this is the best solution. Any other suggestions?
A bit more background:
I have an SPA with various components and a "Loader" component. The loader component is supposed to handle transitions between views.
For example, let's say I have 3 views: (A) Dashboard (B) Accounts (C) Transaction Details.
When the user is on (A) and clicks on a Transaction I want (A) to send notify the Loader that it needs to load the transaction resource and one done update the Browser Location so the the root component can handle the routing.
The Loader should display a loading bar on the top of the page while loading the resource. Once done, it will update the Location bar, so the root component can handle the routing.
In essence what I am trying to avoid is having display the (C) page, before the resource for this is loaded.

Answer 1

A structure like below could hopefully get you going.
More on scaling Elm here (highly recommended)
In the example below you keep all data in your top-level model, and your messages as well.
Such a setup has no parent-child relationships. All views use the same top-level model, and all views produce the same type of messages.
This example navigates to the transactions page as soon as transactions come in.
type alias Model =
{ accounts: List Account
, transactions: Transactions
, currentPage : Page
, message : String
}
type Transactions = Idle | Loading | GotEm (List Transaction)
type Page = DashboardPage | AccountsPage | TransactionsPage
type Msg = ShowDashboard | ShowAccounts | ShowTransactions | GotJSONData
update msg model =
case msg of
ShowTransactions ->
case model.transactions of
GotEm transactions ->
{ model
| currentPage = TransactionsPage
, message = ""
} ! []
Idle ->
{ model
| currentPage = DashboardPage
| transactions = Loading
, message = "Loading transactions"
} ! [ API.getTransactions model GotJSONData ]
Loading ->
model ! []
GotJSONData transactions ->
{ model
| transactions = GotEm transactions
, message = ""
, currentPage = TransactionsPage
}
view model =
case model.currentPage of
DashboardPage ->
DashboardPage.view model
-- DASHBOARD module
view model =
div []
[ ...
, button [ onClick ShowTransactions ] [ text "Show transactions"]
]