<div class="header"></div>
<div id="loader-content"></div>
<div id="content"></div>

var ICON_URL = 'https://cdn.refinitiv.com/public/libs/elf/info.json';
var content = document.getElementById('content');
var theme = 'halo';

function request(url, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", url, true); // true for asynchronous
  xmlHttp.send(null);
}

var displayIcons = function(data) {
  var iconList;

  if (data) {
    data = JSON.parse(data);
    if (!data || !data[theme] || !data[theme].icon || !data[theme].icon.length) {
      content.classList.add('no-content');
      content.innerHTML = 'No icon to display';
    } else {
      iconList = data[theme].icon;
    }
  }

  for (var i = 0; i < iconList.length; i++) {
    const name = iconList[i].name;
    var item = document.createElement('div');
    item.classList.add('item');

    var icon = document.createElement('ef-icon');
    icon.setAttribute('icon', name);

    var iconName = document.createElement('div');
    iconName.classList.add('icon-name');
    iconName.textContent = name;

    item.appendChild(icon);
    item.appendChild(iconName);

    content.appendChild(item);
  }

  var loader = document.getElementById('loader-content');
  loader.parentNode.removeChild(loader);
}

function displayLoader() {
  var loader = document.getElementById('loader-content');
  for (var j = 0; j < 54; j++) {
    var item = document.createElement('div');
    item.classList.add('item');
    loader.appendChild(item);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  displayLoader();
  request(ICON_URL, displayIcons);
});

html {
  margin-top: 20px;
}

.item {
  width: 80px;
  text-align: center;
  padding: 7px;
}

.item:hover {
  transition: background-color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  background-color: #dddfe4;
}

.icon-name {
  padding-top: 5px;
  font-size: 15px;
}

#content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 20px 0;
  min-height: 300px;
}

.no-content {
  justify-content: center;
  align-items: center;
  color: #8a8a96;
  background-color: #fdfdfd;
}

ef-icon {
  font-size: 30px;
}

#loader-content {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}

#loader-content .item {
  height: 73px;
  width: 73px;
  margin: 3px;
  background-color: #f3f3f3;
}