The thing itself
The screen customers see most is the wait
WeFresh sells fresh groceries for next-day delivery in Batu Pahat: vegetables, pork, seafood, eggs, fruit, baby food. The storefront runs on Odoo eCommerce, in English and Chinese.
Grocery shopping online is not one purchase. Nobody buys a single cabbage. A customer works down a category, compares two brands of eggs, changes a quantity, doubles back for the thing they forgot — and every one of those steps has a moment where the shop is fetching something. Across a whole basket those moments add up, until the loading state is the screen that customer sees more often than any other screen on the site, checkout included.
So whatever occupies that time is, in aggregate, the most-repeated piece of brand material the business owns. A stock spinner there is a wasted impression every single time, in front of somebody who is already in the shop and already spending.
Premium is a finish, not a feature
Here is the honest reason this was worth a day of work, and it is not an engineering reason.
Somebody buying vegetables online cannot inspect your cold chain, your warehouse, or how carefully a box gets packed. None of that is visible until the first delivery arrives at the door. Until then they are judging the business on the only evidence in front of them, which is the surface of the website.
That judgement runs on finish, not on features. Whether the type is set properly. Whether the spacing holds. Whether the thing that appears while they wait looks like it was made for this shop or arrived with the theme. A stock spinner is a small tell, but it is a tell, and what it tells a customer is that nobody looked at this screen.
Small businesses cannot outspend anyone on the loud signals. They can win the quiet ones outright, because the quiet ones cost attention rather than budget. This is the clearest example we have: one day of design work, placed in the highest-frequency slot on the entire storefront.
We do not have a conversion figure for this and are not going to invent one. The narrower claim is the true one — the mark now gets rehearsed dozens of times per session, and the wait reads as deliberate instead of generic. That was the whole brief.
Designing motion into a mark that was never drawn for it
The WeFresh mark is a rounded fruit form with a leaf pair on top and the bilingual wordmark beneath. It was drawn as a static logo, which is the usual situation: almost no mark arrives with a motion spec.
The constraint we set ourselves was that the animation may only use construction the logo already contains. No new elements, no bounce, no rotation the mark does not imply. If the animated version and the printed version disagree, the animated one is wrong.
What the mark gives you is a natural order of assembly — the enclosing form, then the leaves, then the wordmark — and that order is the animation. It draws itself the way a person would draw it. That is what reads as craft rather than as an effect, and the distance between those two is the entire point of doing this at all.
Three decisions did most of the work, and all three are restraint rather than invention:
- 3.00 s per cycle. Long enough to read as deliberate; short enough that somebody on a slow connection sees a full cycle rather than a fragment. Under a second reads as a nervous tic, and a nervous loader makes the whole shop feel unsteady.
- A rest at the end of the loop. The last frames hold the completed mark before the cycle restarts. Without that pause the loop reads as a stutter; with it, it reads as a signature.
- It resolves to the static logo. The final frame and the printed mark are the same image, so when the page arrives nothing jumps. The animation ends exactly where the brand already lives.
What the wait does to the person waiting
Two things happen while somebody looks at a loading screen, and it is worth being precise about both, because the temptation is to claim more than either one supports.
The first is that occupied time feels shorter than empty time. David Maister put exactly that at the top of his list in The Psychology of Waiting Lines in 1985, and you already know it from your own life: the lift that shows which floor it is on feels quicker than the identical lift that shows nothing. A loader is the same move. It is not making the server faster. It is giving the eye something to hold while the server takes exactly as long as it was always going to take.
The second is that repetition builds familiarity, and familiarity is most of what people mean by trust in a shop they have not bought from yet. Psychologists call it the mere-exposure effect: we come to prefer things partly because we have seen them before. A moment where a customer is waiting and nothing is being asked of them is about the least demanding brand exposure that exists. A stock spinner does that work for nobody.
Neither of those is licence to inflate what a loader can do. It will not rescue a slow shop. If a page genuinely takes six seconds, the animation is lipstick and the customer can tell. What it does is take a moment that was going to be spent anyway and spend it on you, rather than on a default that arrived with the software.
There is a third effect, and it only appears when the details are wrong. A loader that stutters, jerks or restarts mid-draw makes the entire shop feel unreliable, because a customer cannot tell the difference between an animation that is broken and a site that is broken. That is the real reason for the rest at the end of the loop, and for resolving cleanly into the static mark. Motion that hesitates reads as a system that is struggling.
Getting it live without forking the theme
The tempting move on an Odoo website is to copy the theme and edit it. It is also the move that makes every future version upgrade someone's problem.
A copied theme has to be re-copied and re-checked at every Odoo version, forever, and the bill for that arrives long after the design work everybody enjoyed. So the loader was added alongside the stock theme rather than inside it. Nothing that ships with Odoo was edited, which means there is nothing to reconcile the next time the platform moves.
That is the same principle behind every module we ship on a zynAIR tenant: add beside the theme, never fork it. It costs a slightly less convenient build and it is worth it every single time.
Rules we would give anyone doing this
- Start from the brand, not from the animation. The question is what the mark already does, not which motion you find interesting this month.
- Animate only the mark you have. A loader that introduces new shapes is a second logo nobody approved.
- Resolve to the static logo. The end frame and the printed mark must be the same image.
- Budget it against the page, not against your patience. Smaller than what it covers, always.
- Never block on it. The loader is decoration over an area the browser has already painted. If removing the file breaks the page, it is not a loader.
- Respect reduced motion. A static mark for anyone who has asked for one — including on the page where you write about it. The figure at the top of this article obeys that setting, and so does the card that links to it.
Questions
It is one of the few places where attention beats budget, and it costs about a day of design work. We would rank it below getting your product photography consistent, and above almost every other cosmetic change to a storefront. Do the photography first if you have to choose.
Only if you get the budget wrong. The rule is that the loader must be smaller than the thing it covers and must never block it. This one is smaller than a single product photograph on the page behind it, it is cached after the first view, and it is never on the critical path — it appears in space the browser has already painted while data is in flight.
It does not make it shorter. It makes it feel occupied, which is a different claim and the only one worth making. That distinction matters because it sets what you can expect: a wait that reads as attended to rather than abandoned, which is a real difference to a customer and a small one on a stopwatch.
Less than you would expect, because they are not watching it — they are waiting for the page behind it. The failure mode is not boredom, it is irritation, and irritation comes from motion that draws attention to itself: bounce, spin, anything that reads as a performance rather than a pause. A mark that assembles itself and stops is closer to a page turning than to an advertisement. If you want a test, watch somebody else shop for five minutes. If they mention the loader at all, it is doing too much.
Yes. Odoo's asset bundles let a small module inject a stylesheet and a static image into web.assets_frontend without touching the theme. That matters at upgrade time: a forked theme is a migration liability every version, whereas an asset-bundle override is a few lines that survive.