title: Inserting large quantities in IndexedDB's objectstore blocks UI
body: <p>I want to save some ~35000 objects in my IndexedDB's objectstore. I am using below code to insert.</p>
  
  <pre><code>AddListings = function (x2j_list_new, callback) {   
      var transaction = db.transaction(["listings"], IDBTransaction.READ_WRITE);
      var count = 0;
      transaction.oncomplete = function (event) {
          if (callback) {
              console.log('x2jShowListing Added ' + count + '/' + x2j_list_new.length);
                  callback([count, x2j_list_new.length]);
              }
      };
      transaction.onerror = function (e) {
         console.log("myError: ", e);  
         if (callback) {
            callback(false);
         }
      };
      var store = transaction.objectStore("listings");
  
      $.each(x2j_list_new, function (index0, item0) {
          var request = store.put(item0);
          request.onsuccess = function (event) {
              count++;
              // event.target.result  
              };
          });
      });        
  };
  </code></pre>
  
  <p>The above code works fine, but looping and inserting over ~35000 objects makes the UI unresponsive for ~200 seconds. I thought maybe i can use WebWorkers, but IndexedDB is not available inside WebWorkers. I tried to find a way to bulk insert, couldn't find one. Any ideas of how to insert large quantities of objects without blocking the UI?  </p>