I suppose that part of my program work to slow

Problem

I suppose that my program work so slow. I wait about 2-5 seconds for the code to be executed. 

PS. On the screen you can see GetRooms function, in problem description i use for simplicity GetAnimals

Question

It is posibble make this code more efficient/faster?

Enviroment

In my one from more view i want display data from dependent tables. To illustrate the problem more easily, let's say I have two tables: animals and animalsType

animals Table

animalsType Table

In my view i have two container (let's assume <div> element). In first container i have list of animal. When I click on the name of an animal in the first container (data fromanimals Table), all animals from theanimalType table of this type are loaded into the second container (without page reload).

My controller:

 public async Task<IActionResult> Index()
        {
            var animalsContext = _context.Animals.Include(p => p.AnimalsType);
            return View(await animalsContext .ToListAsync());
        }

 public IActionResult GetAnimalsType(int id)
   {
      var animalsTypeList = _context.AnimalList.Where(x => x.Id_animals== id).ToList();
      var jsonRoomList = JsonConvert.SerializeObject(animalsTypeList ,
         Formatting.None,
         new JsonSerializerSettings()
            {
               ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
            });
       return Content(jsonRoomList, "application/json");
}

My View:

  @foreach (var item in Model.Apartment)
 {<div onclick="loadData(item.Id)">item.AnimalName</div>

}

function loadData(id) { 
var div = document.getElementById("placeToAnimalsType"); 
div.innerHTML = ""; 
$.ajax({ type: "POST", 
   url: '../../Animals/GetAnimalsType', 
   data: { id: id }, dataType: "json", 
   success: function (data) { 
      for (var i = 0; i < data.length; i++) {
      var html = `<div>data[i].Name</div>`;
$("#placeToAnimalsType").append(html);
   }
   }
   });
}