Laddning
När man går in på en sida eller om förutsättningar ändras behöver informationen uppdateras. I vissa fall finns en viss fördröjning där vi vill kunna visa att applikationen håller på att ladda information. Det finns 3 olika gränssnittselement som kan behöva laddas:
- Olika texter som innehåller dynamisk data
- Filter-kontroller
- Listor (i Komponentkartan används främst komponenten vgr-grid för att lista saker)
När innehåll visas på t.ex. en dashboard är det vanligt att data hämtas från flera källor för att visualiseras som mindre paket av information. I dessa fall kan data visas olika snabbt och det kan även vara många olika punkter i gränssnittet som laddas. För att förmedla på ett lugnt sätt att data hämtas har vi valt att inspireras av skeleton loading, d.v.s. block som visar var innehåll kommer att presenteras. De grå blocken pulserar för att indikera att information håller på att laddas.
Ibland visas förutbestämda filterinställningar direkt när man kommer in på en sida. Dock kan det ta en liten stund att hämta vilket värde som ska visas. I dessa fall behöver själva kontrollen kunna signalera att den inte är tillgänglig för interaktion och att värdet ännu inte är satt. Detta görs genom att kontrollen visas i inaktivt läge och dess värde visas som streck (----). När värdet dyker upp blir kontrollen aktiv. Det är inte rekommenderat att låta kontrollen bli innan allt dess innehåll laddats. T.ex. om man har en dropdown med många alternativ bör kontrollen sättas till inaktiv tills dess att man mottagit alla alternativ som ska kunna visas.
När en listas innehåll inte ännu hämtats är mönstret att istället ersätta komponenten med en spinner. När innehållet är mottaget byts spinnern ut mot listan.
