if the replacement looks usually a lot different, then blank the area immediately waiting for the spinner to show up or not.<\/span><\/li>\n<\/ul>\nWe implemented this with MochiKit and here is some sample code:<\/p>\n
var expansion_element = $('mydivcontainingstuff');\r\nvar spinner_loader = MochiKit.Async.callLater(0.15, function() {\r\n MochiKit.DOM.addElementClass(expansion_element, 'loading');\r\n MochiKit.DOM.addElementClass(expansion_element, 'loading-spinner');\r\n spinner_loader = null;\r\n});\r\nd = MochiKit.Async.doSimpleXMLHttpRequest(ajax_url);\r\nd.addCallback(function(result){\r\n $('mystuffdivcontainingstuff').innerHTML = result.responseText;\r\n\r\n if (spinner_loader != null ) {\r\n spinner_loader.cancel();\r\n } else {\r\n MochiKit.Async.callLater(0.2, function() {\r\n MochiKit.DOM.removeElementClass(expansion_element, 'loading-spinner');\r\n MochiKit.DOM.removeElementClass(expansion_element, 'loading');\r\n });\r\n}<\/pre>\nAnd here’s the CSS:<\/p>\n
.loading-spinner {\r\n width: 100px;\r\n height: 100px;\r\n margin-left: auto !important;\r\n margin-right: auto !important;\r\n background-image: url(ajax-loader.gif);\r\n background-repeat: no-repeat;\r\n background-position: 50% 50%;\r\n} \r\n\r\n.loading * {\r\n display: none;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"We were embedding a spinner to give user feedback while loading data from a server which might take a little longer (but can also be pretty quick in most cases). Implementing the spinner itself isn’t that hard, but we found that quick responses from the server caused visual artifacts flickering up because the spinner was … Continue reading “AJAX loading spinner without flickering artifacts”<\/span><\/a><\/p>\n","protected":false},"author":12391367,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[10221],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pFP3y-3","jetpack-related-posts":[{"id":1474,"url":"https:\/\/blog.gocept.com\/2014\/11\/27\/florian-pilz\/","url_meta":{"origin":3,"position":0},"title":"Florian Pilz","author":"","date":"November 27, 2014","format":false,"excerpt":"Today's blogpost is all about me. I joined gocept about a year ago, therefore I want to tell you something about the past - and something about the future. The Past Before joining the gocept crew, I studied computing at the HTWK in Leipzig for 6 years. Since sitting in\u2026","rel":"","context":"In "en"","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.gocept.com\/wp-content\/uploads\/2014\/11\/portrait-small.jpg?fit=210%2C284&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":381,"url":"https:\/\/blog.gocept.com\/2013\/01\/16\/news-from-the-toolbox-gocept-selenium-and-our-plans-for-its-future\/","url_meta":{"origin":3,"position":1},"title":"News from the toolbox: gocept.selenium and our plans for its future","author":"","date":"January 16, 2013","format":false,"excerpt":"For a couple of years, we at gocept have been developing a Python library, gocept.selenium, whose goal it is to integrate testing web sites in real browsers with the Python unittest framework. There exist a number of approaches to doing this; when first starting real-browser tests, we opted for using\u2026","rel":"","context":"In "en"","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1357,"url":"https:\/\/blog.gocept.com\/2013\/08\/20\/viewing-scales-metrics-from-pyramid\/","url_meta":{"origin":3,"position":2},"title":"Viewing scales metrics from Pyramid","author":"","date":"August 20, 2013","format":false,"excerpt":"We've recently started experimenting with the excellent scales library to collect in-process metrics (see Coda Hale's CodeConf talk \"Metrics everywhere\" among many others for reasons why one definitely wants to do that). Scales comes with a flask-based HTTP server that allows viewing the collected measurements and dumping them as JSON.\u2026","rel":"","context":"In "en"","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":98,"url":"https:\/\/blog.gocept.com\/2011\/08\/04\/shutting-down-an-httpserver\/","url_meta":{"origin":3,"position":3},"title":"Shutting down an HTTPServer","author":"","date":"August 4, 2011","format":false,"excerpt":"For integration tests it can be helpful to have a fake HTTP server whose behaviour the tests can control. All necessary building blocks are even included in Python standard library. However, the BaseHTTPServer is surprisingly hard to shut down properly, so that it gives up the socket and everything. While\u2026","rel":"","context":"In "en"","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1367,"url":"https:\/\/blog.gocept.com\/2013\/10\/17\/improving-http-security-at-the-flying-circus\/","url_meta":{"origin":3,"position":4},"title":"Improving HTTP security at the Flying Circus","author":"","date":"October 17, 2013","format":false,"excerpt":"We now know that the secret services employ extended eavesdropping techniques to scan and analyze nearly all Internet traffic. This worries us since we want to keep our customers' data confidential. We get a lot of questions about how secure sites hosted at the Flying Circus are. As security has\u2026","rel":"","context":"In "en"","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1246,"url":"https:\/\/blog.gocept.com\/2013\/03\/03\/how-we-organize-large-scale-roll-outs\/","url_meta":{"origin":3,"position":5},"title":"How we organize large-scale roll-outs","author":"Daniel Havlik","date":"March 3, 2013","format":false,"excerpt":"In the coming week we will deploy an extensive OS update to our production environment which (right now) currently consists of 41 physical hosts running 195 virtual machines. Updates like this are prepared very carefully in many small steps using our\u00a0development and staging setups that reflect the exactly same environment\u2026","rel":"","context":"In "en"","block_context":{"text":"en","link":"https:\/\/blog.gocept.com\/category\/en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/posts\/3"}],"collection":[{"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/users\/12391367"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":4,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/posts\/3\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.gocept.com\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}