[SummaCristian]

The redesign from PoliAule to the PoliNetwork branding has removed any trace of animations and transitions, so I worked across the entire client trying to bring it back while keeping it within PoliNetwork's brand and identity.

I added a whole bunch of animations to many components, with fast timings and subtle transitions, no long-distance translations and no morphs.

Everything is bundled in its own individual commit so that it can be easily amended if not approved.

Description

The app had almost no motion. This adds small, quick transitions where things appear, change or go away, and keeps the brand's restraint. Closes run in 150ms and opens in 250ms, with no bounce or overshoot. Everything is built from Tailwind utilities, plus a few keyframes and view-transition rules in styles.css. It respects prefers-reduced-motion, and the browser's back button still navigates without a slide. The branch is made of small commits, one per behaviour, so any of them can be reverted on its own.

What changes

• Page navigation: opening a room or the info page slides the new page in from the right, and going back reverses it. It uses a view transition, and the header stays put. It falls back to a plain navigation where view transitions aren't supported.
• Things that appear and disappear:
  • the popup exit, plus the "More filters" panel opening and closing by height;
  • data notices and result hints folding in and out;
  • the reset button and count badges, the stale-data note, and map and schedule notes fading in;
  • new room cards and new favourites fading in.
• Selected states: a highlight that slides between options in segmented controls and the theme toggle. The time-range slider eases when the window changes without a drag, and status tags and dots fade between colours.
• Loading and view changes: both maps fade in once drawn, the results list fades in over its skeleton, and search ↔ browse swaps fade. The schedule fades when you pick another day.
• Phones: the controls drop in from the summary bar like a drawer and lift away when closed, while the results fade in.
• Small details: the favourite star swells when switched on, changed counts and labels rise in, the focus ring eases in, and arrows nudge together with their labels on hover.

Map markers

Markers are no longer torn down and rebuilt on every change. They persist and update in place, which removes the flash on filter changes. The map is now clipped, so markers for buildings off screen no longer draw over the building panel or toolbar while the camera moves.

New shared pieces

usePresence (keeps an element mounted while it exits), Reveal (height and fade), Swap and IconSwap, SlidingPill, and Nudge.

Not included on purpose

• Theme cross-fade.
• Reflow animation of result cards.
• Anything driven by keystrokes or scrolling.
• Bounce, stagger and similar effects.

Full list of new animations:

Navigation

• Page slide between home, room and info, in both directions (250ms). The header stays put.
• Back arrow and "Free rooms" label nudge left together on hover.
• Show-results arrow and label nudge right together on hover.
• "Change" and "Edit" chevrons and their labels drop 2px together on hover.
• Directions label and ↗ arrow shift right together on hover.
• Focus ring eases in (100ms).

Popups and panels

• Popup closes with a fade and shrink (150ms), and slides down on phones.
• "More filters" panel opens and closes by height, with a fade.
• Data notices fold in and out by height.
• Result hints ("only partial", "filter impact") fold in and out by height.
• Reset button fades and scales in and out.
• "More filters" count badge eases in.
• Stale-data note fades and grows out of the button's corner.
• Tick fades in on a selected popup option.
• Chip icon cross-fades into a check.

Selection states

• Highlight slides between options in segmented controls (list/map, seats, campus switch).
• Highlight slides between theme options.
• Accent highlight slides between the location map's views.
• Time-range window and handles ease when changed by a button or picker. They follow a drag exactly, with no transition.

Values that change

• Free-rooms count rises in.
• Phone "Show N rooms" label rises in.
• Filter reset count rises in.
• Info page reload label rises in.
• Tags fade between tones.
• Status dot fades between colours.
• Room "now" status fades between tones.
• Favourite star swells when switched on.
• Professor link underline eases its colour on hover.

Appearing content

• Room cards fade in when they join the results.
• A new favourite fades into the list.
• Results list fades in over the skeleton, and when returning from the map.
• Search results ↔ browse view fade into each other.
• Classroom enlarge badge fades in with the photo.
• Schedule notes fade in.
• Schedule fades in when you pick another day.
• Search clear button fades in when you start typing.

Maps

• Campus map fades in once it has drawn.
• Classroom location map fades in once it has drawn.
• Map error message fades in.
• Building panel eases in from the side, or from below on phones.
• Map hint pill fades in.
• Markers fade and swell in when a building appears, and change colour on select, close and hover.

Phones

• Controls drop in from the top like a drawer (16px plus a fade).
• Controls lift away when closed, while the results fade in.
• Results fade in after the controls step.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: f0e50402-45c0-4dd2-8812-d97b3dc59d44

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[viganogabriele]

@SummaCristian Prima del merge sistemerei la sincronizzazione delle view transition: notifyPageRendered() scatta al cambio dell’URL, prima che la pagina sia montata. Con caricamento lento di Info o dei dettagli aula, la transizione mostra solo l’header e il contenuto compare dopo, senza animazione.

Va inoltre risolto il conflitto in home-page.tsx con main. Per il resto, test e controlli locali passano.

[SummaCristian]

@viganogabriele giusto, ora la VT parte dopo aver montato la UI della destinazione, quindi non c'è più l'attesa sulla schermata vuota.

Visto che però adesso c'è l'attesa sulla schermata precedente finchè a quando la destinazione non è montata e pronta per essere animata, ho aggiunto un piccolo spinner al centro dello schermo che compare quando il caricamento supera i 400 ms, giusto per dare un piccolo feedback all'utente mentre aspetta.
Si può ritoccare il delay con cui compare da SPINNER_DELAY_MS in src/lib/navigation.ts.

Risolto anche il conflitto con main

[viganogabriele]

Verificate le correzioni sul commit d274ae9: la navigazione verso Info e i dettagli aula mantiene la pagina precedente durante il caricamento e avvia la transizione con la destinazione pronta, anche rallentando i moduli di 1,2 secondi. Risolto anche il conflitto con main. Passano 66 test, TypeScript, lint, formattazione, build e CI. Approvata.