<h2 id="background">Background</h2>
<p>I have page that requests several resources from server. To keep track what is going on, I initially had model like:</p>
<pre><code>type alias Model =
    { availableChassis : List Chassis
    , chassisLoaded : Bool
    , chassisLoading : Bool
    ...
    }</code></pre>
<p>Problem with this is that I have to remember to check those boolean flags while rendering on screen. And it’s possible to have inconsistent state (both loading and loaded).</p>
<h2 id="solution">Solution</h2>
<p>We can model state with algebraic datatypes and we don’t even have to write it by ourselves as there’s <a href="https://package.elm-lang.org/packages/krisajenkins/remotedata/latest">RemoteData</a> library.</p>
<p>Now we can change our model to following:</p>
<pre><code>import RemoteData exposing (RemoteData(..), WebData)

type alias Model =
    { availableChassis : WebData (List Chassis)
    }</code></pre>
<ul>
<li><code>availableChassis</code> has four states it can be in:
<ul>
<li><code>NotAsked</code>, data isn’t available and it hasn’t been requested from server</li>
<li><code>Loading</code>, data isn’t available, but it has been requested from server</li>
<li><code>Success (List Chassis)</code>, data has been loaded from server</li>
<li><code>Failure Http.Error</code>, there was error while loading data</li>
</ul></li>
</ul>
<p>For example, while rendering the view, you could do</p>
<pre><code>    case model.availableChassis of
        NotAsked -&gt;
            renderEmptyTable

        Loading -&gt;
            renderLoadingTable

        Success chassis -&gt;
            renderChassisList chassis

        Failure error -&gt;
            renderErrorMessage error</code></pre>
