Menu Loading States: Skeleton vs Spinner Best Practices

A 14-table campus cafe in Bursa Görükle dropped its mobile bounce rate from 18% to 11% by replacing a spinning loader with a shimmer-skeleton in their digital menu. Same data, same images, same 3G network — the only thing that changed was showing "structure" instead of "empty waiting."

The Nielsen Norman 2023 data

Nielsen Norman Group's 2023 research found that skeleton screens reduce perceived load time by 38%, while traditional spinners increase it by 12%. The reason is simple: when the human brain sees "what is about to load," it interprets the actual wait as shorter. A spinner only says "something is happening"; a skeleton sketches a map: "title here, price there."

For a restaurant menu, this distinction is critical. The customer is at the table, phone in hand, ready to decide quickly. Even a 2-second blank screen plants doubt: "is the connection broken?" A skeleton removes that doubt because the layout is already there — only the content fills in.

thMenu's default: shimmer-skeleton

thMenu uses CSS gradient shimmer animation for product cards, category tabs, and image placeholders in the customer menu (menu.thmenu.com). Even while product images load, a blur-up placeholder plus skeleton frame is shown. This makes a tangible difference for customers on 3G/4G networks.

• Category tabs: 5 gray pills (80px), 1.5s shimmer
• Product card: image + 2 lines of text + price placeholder
• Cart drawer: row skeleton instead of "Loading your cart..."

When is a spinner the right choice?

Skeleton isn't right everywhere. For action confirmation flows — "Sending order," "Processing payment," "Calling waiter" — a small inline spinner works better. Here the layout is already part of user context; what's awaited is the "outcome." A spinner expresses that uncertainty cleanly.

Rule of thumb: skeleton for data loading, spinner for action processing. In thMenu, tapping "Add to Cart" produces an inline spinner within 200ms, followed by a toast on success. This micro-feedback prevents the "did my tap register?" question.

FAQ

Can a slow skeleton animation backfire? Yes. Shimmer cycles longer than 2 seconds become irritating. The sweet spot is 1.2-1.8s; thMenu defaults to 1.5s.

Is skeleton enough on very poor networks? Skeleton plus a "Slow connection, please wait" toast after 8+ seconds covers the edge case. thMenu also offers a service worker offline fallback.

Is skeleton accessibility-friendly? Yes — add aria-busy="true" and aria-label="Menu loading". Screen readers announce "loading," so visually-impaired users aren't left in silence while the screen is empty.

Found this helpful? Share it.