title: Blazor Components: Data disappears and loads agains after 4 seconds
body: <p>This is a menu component which is placed in MainLayout. H5 tags show up and disappear in a blink of an eye and then after 4 secs. It loads again. Anyone meet the same problem?</p>
  
  <pre><code>&lt;ul class="nav-title"&gt;
      &lt;li class="brands"&gt;
          &lt;div class="menu-dropdown sb-2"&gt;
            @foreach (var brand in Brands)
            {
              &lt;div class="nav-column"&gt;
                  &lt;h5&gt;@brand.Header&lt;/h5&gt;
                  &lt;ul&gt;
                    @foreach (var item in brand.Items)
                    {
                      &lt;li&gt;@item.Id&lt;/li&gt;
                    }
                  &lt;/ul&gt;
              &lt;/div&gt;
            }
         &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre><code>@code {
      private List&lt;BrandModel&gt; Brands { get; set; } = new List&lt;BrandModel&gt;();
  
      private List&lt;CategoryModel&gt; Categories { get; set; } = new List&lt;CategoryModel&gt;();
  
      private List&lt;ColorModel&gt; Colors { get; set; } = new List&lt;ColorModel&gt;();
  
      protected override async Task OnInitializedAsync()
      {
          Brands = await HeaderNavComponentService.GetBrandAsync();
          Categories = await HeaderNavComponentService.GetCategoryAsync();
          Colors = await HeaderNavComponentService.GetColorAsync();
      }
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          if (firstRender)
          {
              await JS.InvokeVoidAsync("lazyLoadNav");
          }
      }
  }
  </code></pre>
  
  <p><strong>Update to @enet's answer:</strong></p>
  
  <p><em>render-mode="Server"</em> cuts the blink out and the delay is left.</p>
  
  <p>I actually want to load the data as fast as posible. The prerender speed is exactly what i want it to be. In that blink, it also has the value retrieved from service. I just dont like the part it disappears and loads back after a time which no line of code tells the app to make such behavior.</p>
  
  <p>The way this issue occurs, i predict any dynamic components will have a minimum dead time of (2 seconds + data load time ) due to no data.</p>
  
  <p>It's really sad UX though having to wait for a time to be able to look at the navigation list. It seems my plan to use Blazor for new project is broken :(</p>
  
  <p><strong>Update to Henk's answer:</strong></p>
  
  <p>Really not make sense to me that put StateHasChange() after each assigned variable could help but it did. But still theres flickering.</p>
  
  <p>Then i change render-mode="Server" and the result is expected behavior that no more flickering, the data binds to UI fast.</p>
  
  <p>SO i think whatever u do, OnInitialize will run twice, just it wont bind to UI in pre-render phase if render-mode is put to Server.</p>