title: Loading state not effective in the React application (MobX)
body: <p>I am coding a React app that fetches data from WordPress REST API. Everything works fine so far, however, loading indicator does not show up. I use MobX for state management. I have a loadingInitial observable. Whenever I start my action, I set this observable true to get into loading state. After the action does necessary operations, I reset loadingInitial to false. So I expect to see loading screen while fetching posts. But I see blank page while the daha is loading.</p>
  <p>Here are the code for the action:</p>
  <pre class="lang-js prettyprint-override"><code>    @action loadAnecdotes = async (page: number, year: number, order: string) =&gt; {
          this.loadingInitial = true
          try {
              const anecdotesHeaders = year === 0 ? await agent.AnecdotesHeaders.list() : await agent.AnecdotesHeaders.listByYear(year)
              const maxPages = anecdotesHeaders['x-wp-totalpages']
              
              if (page &lt;= maxPages) {
                  const anecdotes = year === 0 ? await agent.Anecdotes.list(page, order) : await agent.Anecdotes.listByYear(page, year, order)
                  runInAction(() =&gt; {
                      this.anecdoteArray = []
                      anecdotes.forEach((anecdote, i) =&gt; {
                          this.anecdoteArray[i] = anecdote
                      })
                      this.loadingInitial = false
                  })
              } else {
                  runInAction(() =&gt; {
                      this.loadingInitial = false
                  })
              }
              return {anecdoteArray: this.anecdoteArray, maxPages}
          } catch (error) {
              console.log(error)
              this.loadingInitial = false
          }
      }
  </code></pre>
  <p>Here is my useEffect in the component where I fetch the posts:</p>
  <pre class="lang-js prettyprint-override"><code>    useEffect(() =&gt; {
          loadAnecdotes(page, year, order).then(result =&gt; {
              if (page &lt;= result?.maxPages)
                  setArray(a =&gt; [...a, ...result?.anecdoteArray!])
              setLoaded(true)
          })
      }, [loadAnecdotes, page, year, order, setLoaded, setArray])
  </code></pre>
  <p>Here is the what I call just before the returning the posts:</p>
  <pre class="lang-js prettyprint-override"><code>if (loadingInitial) return &lt;LoadingComponent content='Anecdotes loading...' /&gt;
  </code></pre>
  <p>As a side note, my component is set as an observer.</p>
  <p>What could I be doing wrong?</p>