ajax isotope

$(document).ready(function () {
  // Crea e aggiungi il loader dinamicamente
  const $loader = $('<div id="loader">Caricamento...</div>').css({
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    fontSize: '20px',
    background: 'rgba(255, 255, 255, 0.9)',
    padding: '15px 30px',
    border: '1px solid #ddd',
    display: 'none',
  });
  $('body').append($loader);

  // Crea e aggiungi il contenitore della griglia dinamicamente
  const $grid = $('<div id="grid"></div>').css({
    display: 'flex',
    flexWrap: 'wrap',
    marginTop: '20px',
  });
  $('body').append($grid);

  // Aggiungi stili dinamici per gli elementi della griglia
  $('<style>')
    .text(`
      .grid-item {
        width: 30%;
        margin: 1%;
        background: #f0f0f0;
        padding: 20px;
        text-align: center;
        border: 1px solid #ddd;
      }
    `)
    .appendTo('head');

  // Carica Isotope dinamicamente
  $.getScript('https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js', function () {
    // Mostra il loader e avvia la chiamata AJAX
    $loader.show();

    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts', // Endpoint di esempio
      method: 'GET',
      dataType: 'json',
      beforeSend: function () {
        $loader.show(); // Mostra il loader
      },
      success: function (data) {
        // Genera dinamicamente gli elementi della griglia
        const items = data.slice(0, 9).map(
          (item) =>
            `<div class="grid-item category${item.id % 3}">${item.title}</div>`
        );
        $grid.append(items.join(''));

        // Inizializza Isotope
        $grid.isotope({
          itemSelector: '.grid-item',
          layoutMode: 'fitRows',
        });
      },
      error: function (err) {
        console.error('Errore nel caricamento degli elementi:', err);
      },
      complete: function () {
        $loader.hide(); // Nascondi il loader
      },
    });
  });
});