I was playing around with some new UI ideas. Obviously (but unfortunately) doing that kind of stuff JQuery needs some time for waiting until everything has been loaded and for moving elements around. User will see this kind of UI-surgery. This was annoying - at least for me - and so I have made up my mind how to hide the form at the beginning and show it after all changes have been done. Additionally I am showing an animated loader gif to provide feedback. Please compare by yourself:
Before
You can see the default form from the beginning on. But you can also see the "flickering" when elements are being moved around by code.
After
You cannot see the form at the beginning. There is just a loader-animation. As soon as the form is being shown, the layout has been finished.
Can you see the difference?
- Without that hack (first video) you can see the form from the beginning on, but you can also see that element are being moved to new places
- Using the hack (second video) you cannot see the form at the beginning, but as soon as you can see it, all layouting has been finished. In the meantime, there is a small loading animation (top left)
I know, it's only minimum. But somehow I love improving UI - even if it is only little.
You can give it a try: just add a few lines of code to your hooks/header-extras.php:
Code: Select all
<style>
/* hide detail view from the beginning on */ .detail_view { display: none; }
/* show spinner */ .page-header:after { content: url('loading.gif'); }
/* prepare hiding spinner */ .page-header.loaded:after { content: ''; }
</style>
<script>
// Attention: the next line of code requires AppGini Helper Javascript Libray
new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>
Best,
Jan