Overview of the app
Real preloader is welcome screen / splash screen app that shows site visitor loading animation while first page of website is being fully loaded. The app allows user to add different type of preloaders with animation and transition to their site using Blocks and Embedded Script. It supports many different type images as GIFs, SVGs. Lotties and even custom JS/CSS code can be used.
Features in action
Design: Site builders can upload any square ratio image; static or animated. He can select any color or paster hex code for background. Background has opacity controls too if they want site visitors to see site loading in background in real time. All the image file formats supported by Wix media manager are supported here. We have given scaling option for image with a limit set so that it looks good for every screen size.
If user don’t have animated image, we have given animation loop presets to apply on that logo. Preloader transition presets for smooth exit flow into loaded site page.
Experimental effects have themes that changes look of entire preloader that user made here. Can imagine like 3d preloader or preloader with site loading behind in glass blur. It will also have presets with limited text inputs. For example a retro effect that will apply filter on logo uploaded and give option to write text in limited characters. Or entire gradient based theme or completely animated vector background with interactive logo animation in foreground.
Custom Code: This option is more for users who don't know how to code but can understand little bit of it. Users that copy paste code from web. Like if someone likes some animation on codepen or other site, he can simply paste html css code here without having to worry about code and logic of how preloader works.
Lottie: People love lottie on web. There is huge collection of lottie animations. Most of them can be used as loading animations. So giving support for it is must. Here users can directly paste JSON of lottie and it will be inserted as preloader. Sometimes lottie files can be big so we also added support for dotlottie which are small files with nearly same quality. Users can paste json of lottie or dotlottie.
Apart from all different options for preloader users can also specify if they want preloader to appear on first loaded page only or all subsequent navigations.
How it's useful
Wix editor on mobile version has welcome screen editor but desktop version there is no option. Nothing for studio sites too. So we made simple editor that lets site builders ability to add preloader to their site within few clicks. What makes this powerful is ability to add lottie and dotlottie animation directly as loading animation for wix site. Our preloader do not use any fake timeout, it goes away when site is truly loaded. That's why its real!
Hundreds of people on web are trying various different things to add real preoloader to Wix Site but most of them are with fake timeout.
Many users want to add loading screen as part of site experience. Purposefully built heavy landing pages of sites need preloaders mandatorily. Many world famous sites even have interactive preloading animations. Many clients whom we made websites for timely came to us for adding loading animation. We at time added it from custom code field given to add code in html head tag. But they again and again wanted little changes and we have to change all our code. Site builders need all customization ability and see every change they make in real-time just like Wix. If Wix had given this feature, thousands of sites would have used it.
With a preloader the site looks more polished and professional. It abstracts the loading elements with a beautiful image and present the website to user once its loaded.
The app is useful as it provides a no code solution to add preloader in just few clicks.
Usage instructions
When user opens the app he will see four pages in menu. On each page there is real-time preview window to show exactly how it will look when applied. By default the first page will be design one. Design page is just like Wix welcome screen builder in mobile editor. Here he can make basic preloader by uploading media, settings background color and selecting any animations/effects if he wants to. Clicking on apply will inject preloader code to site. Similarly user can paste custom code directly in its input and apply it. For adding lottie animation, user has to paste entire json of lottie / dotlottie file.
For removing the injected code, user can come to settings page and remove it completely without uninstalling the app. Here user also has option to select if he wants to show preloader on just the first page site visitor lands or on every page he visits.
Limitations and unfinished work:
The biggest issue we are facing in this app currently is slow response time of exposed api via http-functions of Wix Block. We are using Block to save user's preloader details in CMS and using http-functions to expose those settings to embedded script which will then embed the preloader to the user's page. However since the http-function has very high response time (nearly ~4-5 seconds) it makes preloader appear 4-5 seconds late. Which defeats the purpose of having a preloader. Since the preloader code runs after delay, sites are generally loaded 100% in that time, which makes our preloader to not appear at all. We have contacted wix support but there has been no solution to why http-functions are slow.
We very much wanted to add support for animated vector (animated SVGs) but Wix Media Manager dont support animated SVGs. So right now all the images formats supported by wix media manager are supported on app. When Wix gives support for animated vector, it will automatically be supported on app.
We have added limited loop animation, transition and effects due to less time. We want to add many more cool ones, make them run very fluidly before making app live on marketplace.
Because currently there is delay from http function api, we realized there will be many websites which are optimized to load very fast and many users have very fast connections. So for those websites, real preloader will not appear at all on load. So we plan to add option to enable fake timeout option so such websites have choice to use our app to add loading screen as part of user experience they design for their website.
How we made it and challenges
Majority of challenges we faced were related to bugs on Blocks platform like app would stop installing for quite a while, or exposed APIs via http-functions wont work. Some of these problems were solved by Wix Team while some are still present.
When we started with app, we were first using the upload button in Blocks but we soon found that upload button has a bug which is not uploading images on live user sites, instead it uploads all images to Block's Media Manager. So we ended up using wix-dashboard's openMediaManager method that open user's media manager and user can select any file from his own media. This was the better option.
After making the basic upload functionality and preview, there was a challenge of updating preview live when user uploads a new image or change any of the options. For this a communication link was required between velo and iframe in which live preview of preloader was running. We solved this by using postMessage and onMessage methods in velo which allow sending message and data to iframe. Becuase of this we were able to make instant preview possible. Now as soon as user change something it will reflect directly on the preview on side. This made it very easy for user to edit and experiment.
Now the preloader with image and gifs were working our next challenge was to add lottie support. We first started by using lottie URL to fetch the json and use lottie web player to show it on preloader. But we soon found that request to get lottie file from url would take some time and make the preloader appear late on site.
To solve this we provided support to paste lottie json directly in the app and it will be stored directly which made it possible to have lottie available without needing additional request everytime a page load. As a result you could now paste complex lottie files which are thousands of lines of json code directly and it would load way faster then making a request to get JSON file from some URL.
But we soon found another challenge that some lotties would play while others wont. This was a problem with lottie-web library we were using from airbnb to add lottie player on website. Then we experimented with different libraries and settled on using dotlottie-web.
With lottie also working, next was adding support was custom JS and HTML preloader where user can directly paste preloader code and we would insert it on website. It was easy and had no problems.
Now we come to most important part. How would we add the preloader code to actual user website. We were scratching our head in finding a way Wix Block can add a preloader widget that would load instantly. We found out that it is not possible to add preloader with Wix Block as it cannot add preloader code directly to website using Embedded Script.
So we started looking for way to embed a script to website which would load preloader. But it was not possible via Blocks. We had to use a custom app to insert an embedded script. Ideally it should be possible to just add an standalone embedded script without Custom App, but for some reason Wix need a custom app to active the embedded script.
Now comes the problem with Embedded script, it became very hard to test and change embedded script because it would frequently stop updating on live site. Any changes we do in script and rebuild and install the app on website, it will show older script on live site. Caching issue from wix side? maybe. But it takes few rebuilds and refreshes for new script to kick in.
Next question was how will embed script fetch preloader details saved in CMS using Blocks? It need details like preloader code, image, settings like transitions and animations to display the preloader correctly. For that we exposed an api from blocks app using http functions. This api would directly return HTML code needed to display the preloader. And all that embedded script has to do now is to take that HTML code and insert it at top of body.
But here again we hit a major roadblock. WIx http-function api to return HTML code of preloader based on user settings was very slow in response. To see if querying database to get settings is the issue or not, we just returned a static HTML code in api. But even that api with static code will take ~3-4 minutes to give response. Which is very late for an api which is just returning some text. We got in touch with Wix Team but they could not help us in this case.
Now domino effects of getting late response from api with preloader html code is that preloader appears late on site. Nearly ~5 seconds late. This means site is visible at first and then the preloader will appear. Which really defeat purpose of having a preloader. And sometimes when a site loads faster than 5 seconds, preloader will appear and stay there.
This was happening becuase preloader depended on browser's event which indicate when page load completes. But since website loads faster then preloader in some cases, that even would have already fired and preloader will keep waiting for that event after that. To fix that we added another code in preloader which check if page is already loaded or not and hide preloader is page is already loaded.
This fixed the problem of infinite preloaded but it means now preloader was not shown at all when website is loaded faster then api can return the preloader code. This was unfortunate but it is the only option for now, until wix team can find the reason why http-functions take 3-4 minutes to return static text in api.
Also in settings of app we wanted to give option to show preloader only first time or everytime a page change happen. We achieved this using Embedded script. It was quite an unusual way of doing it but there is an event in embedded script that indicates page changes. And we added a code to reinsert preloader on that event if user chooses to show preloader on every page via our apps settings.
Later we also noticed sometimes preloader would hide and show real webpage but images would be still loading. Upon further digging into browser apis and events we found that browser generally fires event that page is completed loading as soon as DOM is rendered. It does not wait for every resource like images and other media to load full.
We indeed find a way to keep preloader shown until everything including image is loaded but that would require a CSS class to be addded to last image element on page in wix editor.
Although this is possible but it requires user to add CSS class manually and there is no option to add CSS classes on classic wix editor. So we didn't used this approach.
Perhaps Wix will allow us to add css classes to user's elements directly using velo on Blocks someday. Or even expose velo api to indicate when full page is loaded to make things like preloader works easily.
What we learnt from building this?
For first time we thought with a perspective on how site builders will design new preloaders with our app rather than designing it directly.
We got complete understanding of Blocks and Embedded script from this project.
Starting from using basic elements and velo to doing advance stuff like passing messages between iframe and dashboard for live preview.
We explored thousands of preloader trying to understand how preloader works and how to make a preloader that is real one which disappears only when page is completly loaded. (Not a fake preloader with some timeout which surprising number of websites uses still).
Also got the understanding of using html inside a dashboard to make elements which are not present in Blocks using HTML and iframe and how to pass data to that element from velo.
We found very clever solutions for many of the problems we faced during making this app like finding browser events that indicate when page is loaded. Using that browser event in embedded script to remove preloader at appropriate time etc.
We got deeper understanding of workings and shortfalls of Blocks. Now we have a clear picture of what things are possible in Blocks and what things we need to add using external methods. This will help us in making further apps for Wix Marketplace.
For many uses cases, we can think where multiple dashboard pages for single app are needed. It should not be restricted to one page on Blocks.
コメント