{"action":"created","issue":{"url":"https://api.github.com/repos/dfahlander/Dexie.js/issues/180","repository_url":"https://api.github.com/repos/dfahlander/Dexie.js","labels_url":"https://api.github.com/repos/dfahlander/Dexie.js/issues/180/labels{/name}","comments_url":"https://api.github.com/repos/dfahlander/Dexie.js/issues/180/comments","events_url":"https://api.github.com/repos/dfahlander/Dexie.js/issues/180/events","html_url":"https://github.com/dfahlander/Dexie.js/issues/180","id":134368150,"number":180,"title":"DOM Blocking/Locking","user":{"login":"tolian49","id":3180274,"avatar_url":"https://avatars.githubusercontent.com/u/3180274?v=3","gravatar_id":"","url":"https://api.github.com/users/tolian49","html_url":"https://github.com/tolian49","followers_url":"https://api.github.com/users/tolian49/followers","following_url":"https://api.github.com/users/tolian49/following{/other_user}","gists_url":"https://api.github.com/users/tolian49/gists{/gist_id}","starred_url":"https://api.github.com/users/tolian49/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tolian49/subscriptions","organizations_url":"https://api.github.com/users/tolian49/orgs","repos_url":"https://api.github.com/users/tolian49/repos","events_url":"https://api.github.com/users/tolian49/events{/privacy}","received_events_url":"https://api.github.com/users/tolian49/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-17T18:59:23Z","updated_at":"2016-02-17T23:11:11Z","closed_at":null,"body":"I was trying to put in place a status bar during a long operation that inserts records to the DB. The idea is that prior to each add I would update the x of y value which could easily be a progress bar then too. However I'm noticing that the HTML wont update until after all of the transactions are done. I'm not clear on exactly what's  blocking the DOM from updating. I note that I can log the value to the console and watch it tick up as it goes. \r\n\r\nAny ideas are very helpful, I notice that this does prevent things from occurring on the page as well other than the loading that I was trying to accomplish. It's minor, but a load of 10 seconds can be noticeable as the recordset grows >10,000 rows.\r\n\r\nHere's some code as an example of how that would work via an ajax call where dbW is my dexie instantiated database:\r\n\r\nfunction getInventory(){\r\n\r\n        if(gettingInventory == 1) return;\r\n\tgettingInventory=1;\r\n\tdbW.inventory.clear().then( function(){\r\n        return new Dexie.Promise(function (resolve, reject) {\r\n\t\t\t$.ajax('/Transactions/sync/getInventory.cfm', {\r\n\t\t\t\ttype: 'get',\r\n\t\t\t\tdataType: \"json\",\r\n\t\t\t\terror: function (xhr, textStatus) {\r\n\t\t\t\t\treject(textStatus);\r\n\t\t\t\t\tgettingInventory=0;\r\n\t\t\t\t},\r\n\t\t\t\tsuccess: function (data) {\r\n\t\t\t\t\t// Resolving Promise will launch then() below.\r\n\t\t\t\t\t//alert(data);\r\n\t\t\t\t\tresolve(data);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}).then(function (data) {\r\n\t\t\treturn dbW.transaction('rw', dbW.inventory, function () {\r\n\t\t\t\tdata=queryToObject(data);\r\n\t\t\t\tvar invLoadCount=0\r\n\t\t\t\tdata.forEach(function (item) {\r\n\t\t\t\t\tinvLoadCount++;\r\n\t\t\t\t\t$('#invLoadStatus').text(invLoadCount + ' of ' + data.length);\r\n\t\t\t\t\tconsole.log(invLoadCount + ' of ' + data.length)\r\n\t\t\t\t\tdbW.inventory.add(item);\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t}).then(function () {\r\n\t\t\tconsole.log (\"GetInventory Sync committed\");\r\n\t\t\tdbW.inventory.count(function(val){$('#inventoryCount').html(val)});\r\n\t\t\tgettingInventory=0;\r\n\t\t\t$('#inventoryTime').html(curTime())\r\n\t\t});\r\n\r\n\t});\r\n}"},"comment":{"url":"https://api.github.com/repos/dfahlander/Dexie.js/issues/comments/185451359","html_url":"https://github.com/dfahlander/Dexie.js/issues/180#issuecomment-185451359","issue_url":"https://api.github.com/repos/dfahlander/Dexie.js/issues/180","id":185451359,"user":{"login":"dfahlander","id":6791329,"avatar_url":"https://avatars.githubusercontent.com/u/6791329?v=3","gravatar_id":"","url":"https://api.github.com/users/dfahlander","html_url":"https://github.com/dfahlander","followers_url":"https://api.github.com/users/dfahlander/followers","following_url":"https://api.github.com/users/dfahlander/following{/other_user}","gists_url":"https://api.github.com/users/dfahlander/gists{/gist_id}","starred_url":"https://api.github.com/users/dfahlander/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dfahlander/subscriptions","organizations_url":"https://api.github.com/users/dfahlander/orgs","repos_url":"https://api.github.com/users/dfahlander/repos","events_url":"https://api.github.com/users/dfahlander/events{/privacy}","received_events_url":"https://api.github.com/users/dfahlander/received_events","type":"User","site_admin":false},"created_at":"2016-02-17T23:11:11Z","updated_at":"2016-02-17T23:11:11Z","body":"As blogged about by @nolanlawson, this is an issue in some browsers but not others (http://nolanlawson.com/2015/09/29/indexeddb-websql-localstorage-what-blocks-the-dom/). Can be worked around by using indexedDB from a WebWorker.\r\n"}}