Bootstrap integrated UI Block with Zero Flicker
The jquery plugin “UI-Block” is an oldie but goodie, which has helped me in some hairy situations from previous developers' work. A lot of code I come across isn’t prepared for delays but this library is the easiest way for handling delays and preventing user click events after ajax calls have happened. A while back I created a graph to help create consist flow for all the possibilities but I may have over just over complicated. With this new approach I have a straight forward solution that doesn’t require much js code. Rather that using JavaScript it uses. css for performance reasons.
There is a angular UI-Block and even a update version of UI-block for bootstrap, but I didn’t see the performance of either that I was looking for.
Inside a div element!
The final piece is important.
found an example - http://jsfiddle.net/wilsotobianco/b5LkaLan/2/
which I need to recreate, but for now I just used the modal for global use and inside the div display a process bar or gif spinner. The point again to be clear is to not include extra code for a module or plugin.
Results
you can find my code and example on logicoma.com, which may change but I will probably follow the same example in the future. The delay is forced for a few milseconds and deletes itself after the data is injected.
Resources