[{"data":1,"prerenderedAt":501},["ShallowReactive",2],{"navigation":3,"page-\u002Fit\u002Fautomatic-skeletonization":140},[4,74],{"title":5,"path":6,"stem":7,"children":8,"page":73},"En","\u002Fen","en",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69],{"title":10,"path":11,"stem":12},"Getting Started","\u002Fen\u002Fgetting-started","en\u002F1.getting-started",{"title":14,"path":15,"stem":16},"Nuxt Integration","\u002Fen\u002Fnuxt-integration","en\u002F10.nuxt-integration",{"title":18,"path":19,"stem":20},"Theming","\u002Fen\u002Ftheming","en\u002F11.theming",{"title":22,"path":23,"stem":24},"SSR","\u002Fen\u002Fssr","en\u002F12.ssr",{"title":26,"path":27,"stem":28},"Performance","\u002Fen\u002Fperformance","en\u002F13.performance",{"title":30,"path":31,"stem":32},"DevTools","\u002Fen\u002Fdevtools","en\u002F14.devtools",{"title":34,"path":35,"stem":36},"FAQ","\u002Fen\u002Ffaq","en\u002F15.faq",{"title":38,"path":39,"stem":40},"Troubleshooting","\u002Fen\u002Ftroubleshooting","en\u002F16.troubleshooting",{"title":42,"path":43,"stem":44},"Installation","\u002Fen\u002Finstallation","en\u002F2.installation",{"title":46,"path":47,"stem":48},"Configuration","\u002Fen\u002Fconfiguration","en\u002F3.configuration",{"title":50,"path":51,"stem":52},"Basic Usage","\u002Fen\u002Fbasic-usage","en\u002F4.basic-usage",{"title":54,"path":55,"stem":56},"Advanced Usage","\u002Fen\u002Fadvanced-usage","en\u002F5.advanced-usage",{"title":58,"path":59,"stem":60},"Automatic Skeletonization","\u002Fen\u002Fautomatic-skeletonization","en\u002F6.automatic-skeletonization",{"title":62,"path":63,"stem":64},"Components","\u002Fen\u002Fcomponents","en\u002F7.components",{"title":66,"path":67,"stem":68},"Directives","\u002Fen\u002Fdirectives","en\u002F8.directives",{"title":70,"path":71,"stem":72},"Composables","\u002Fen\u002Fcomposables","en\u002F9.composables",false,{"title":75,"path":76,"stem":77,"children":78,"page":73},"It","\u002Fit","it",[79,83,87,91,94,98,101,104,108,112,116,120,124,128,132,136],{"title":80,"path":81,"stem":82},"Per iniziare","\u002Fit\u002Fgetting-started","it\u002F1.getting-started",{"title":84,"path":85,"stem":86},"Integrazione Nuxt","\u002Fit\u002Fnuxt-integration","it\u002F10.nuxt-integration",{"title":88,"path":89,"stem":90},"Temi","\u002Fit\u002Ftheming","it\u002F11.theming",{"title":22,"path":92,"stem":93},"\u002Fit\u002Fssr","it\u002F12.ssr",{"title":95,"path":96,"stem":97},"Prestazioni","\u002Fit\u002Fperformance","it\u002F13.performance",{"title":30,"path":99,"stem":100},"\u002Fit\u002Fdevtools","it\u002F14.devtools",{"title":34,"path":102,"stem":103},"\u002Fit\u002Ffaq","it\u002F15.faq",{"title":105,"path":106,"stem":107},"Risoluzione dei problemi","\u002Fit\u002Ftroubleshooting","it\u002F16.troubleshooting",{"title":109,"path":110,"stem":111},"Installazione","\u002Fit\u002Finstallation","it\u002F2.installation",{"title":113,"path":114,"stem":115},"Configurazione","\u002Fit\u002Fconfiguration","it\u002F3.configuration",{"title":117,"path":118,"stem":119},"Uso di base","\u002Fit\u002Fbasic-usage","it\u002F4.basic-usage",{"title":121,"path":122,"stem":123},"Uso avanzato","\u002Fit\u002Fadvanced-usage","it\u002F5.advanced-usage",{"title":125,"path":126,"stem":127},"Skeletonizzazione automatica","\u002Fit\u002Fautomatic-skeletonization","it\u002F6.automatic-skeletonization",{"title":129,"path":130,"stem":131},"Componenti","\u002Fit\u002Fcomponents","it\u002F7.components",{"title":133,"path":134,"stem":135},"Direttive","\u002Fit\u002Fdirectives","it\u002F8.directives",{"title":137,"path":138,"stem":139},"Composable","\u002Fit\u002Fcomposables","it\u002F9.composables",{"id":141,"title":125,"body":142,"description":495,"extension":496,"meta":497,"navigation":498,"path":126,"seo":499,"stem":127,"__hash__":500},"content\u002Fit\u002F6.automatic-skeletonization.md",{"type":143,"value":144,"toc":485},"minimark",[145,149,174,179,182,237,250,254,261,270,273,383,386,390,430,434,445,449,456,460],[146,147,125],"h1",{"id":148},"skeletonizzazione-automatica",[150,151,152,153,157,158,162,163,166,167,173],"p",{},"Il cuore del modulo è un ",[154,155,156],"strong",{},"motore che analizza il DOM"," ed è in esecuzione dentro ogni\n",[159,160,161],"code",{},"\u003CSkeletonizer>"," attivo. Percorre il sottoalbero renderizzato (DFS con leaf-stop), ",[154,164,165],{},"misura"," ogni\nelemento che skeletonizzerà, lo classifica e renderizza l'intero risultato come ",[154,168,169,170],{},"un unico overlay\n",[159,171,172],{},"\u003Csvg>"," posizionato sopra il contenuto reale (nascosto ma ancora presente nel layout) — senza mai\nspostare, avvolgere o rimuovere un nodo.",[175,176,178],"h2",{"id":177},"cosa-riconosce","Cosa riconosce",[150,180,181],{},"Il motore classifica gli elementi in tipi semantici di osso:",[150,183,184,187,188,187,191,187,194,187,197,187,200,187,203,187,206,187,209,212,213,187,216,187,219,187,222,187,225,228,229,232,233,236],{},[159,185,186],{},"text"," · ",[159,189,190],{},"heading",[159,192,193],{},"image",[159,195,196],{},"avatar",[159,198,199],{},"badge",[159,201,202],{},"tag",[159,204,205],{},"button",[159,207,208],{},"icon",[159,210,211],{},"input"," ·\n",[159,214,215],{},"textarea",[159,217,218],{},"select",[159,220,221],{},"checkbox",[159,223,224],{},"radio",[159,226,227],{},"switch"," · oltre ai generici ",[159,230,231],{},"block"," \u002F ",[159,234,235],{},"container"," e\nai componenti personalizzati.",[150,238,239,240,242,243,246,247,249],{},"La classificazione usa i nomi dei tag, i ruoli ARIA, gli stili calcolati e la struttura (ad es. un\nelemento pressoché quadrato con raggio circolare diventa un ",[159,241,196],{},"; un ",[159,244,245],{},"\u003Cimg>"," diventa un ",[159,248,193],{},").",[175,251,253],{"id":252},"fedeltà-di-layout-una-replica-strutturale-non-unapprossimazione","Fedeltà di layout — una replica strutturale, non un'approssimazione",[150,255,256,257,260],{},"Lo skeleton non è un sostituto approssimativo: viene misurato per essere una ",[154,258,259],{},"replica\nstrutturalmente fedele"," del layout reale, coordinata per coordinata.",[262,263,267],"pre",{"className":264,"code":266,"language":186},[265],"language-text","Elemento reale  →  Bounding box (scan)  →  Blueprint SVG  →  Skeleton renderizzato\n  312×48px           { x, y, w:312,          \u003Crect width=\"312\"      box identico\n  rx 8px              h:48, radius:8 }          height=\"48\" rx=\"8\"\u002F>  312×48\n",[159,268,266],{"__ignoreMap":269},"",[150,271,272],{},"Cosa viene preservato esattamente, senza inventare alcun valore:",[274,275,276,299,320,334,359],"ul",{},[277,278,279,282,283,286,287,290,291,294,295,298],"li",{},[154,280,281],{},"Larghezza e altezza"," — lette tramite ",[159,284,285],{},"getBoundingClientRect()"," e trasferite invariate su\n",[159,288,289],{},"width","\u002F",[159,292,293],{},"height"," dell'SVG (arrotondate a ",[159,296,297],{},"svgPrecision"," cifre decimali, così il blueprint\ncorrisponde al box reale con una tolleranza di ±1px). Nessuna larghezza arbitraria, nessuna\npercentuale indovinata, nessun rimpicciolimento casuale.",[277,300,301,304,305,308,309,290,312,315,316,319],{},[154,302,303],{},"Border radius"," — il ",[159,306,307],{},"border-radius"," calcolato dell'elemento si trasferisce direttamente su\n",[159,310,311],{},"rx",[159,313,314],{},"ry"," della forma (oppure su un ",[159,317,318],{},"\u003Ccircle>"," quando l'elemento è quadrato e visivamente\nrotondo — vedi Avatar più sotto).",[277,321,322,325,326,329,330,333],{},[154,323,324],{},"Righe di testo"," — un nodo di testo che va a capo viene misurato riga per riga\n(",[159,327,328],{},"Range.getClientRects()","), quindi un paragrafo che si spezza in 3 righe reali da 320px \u002F 287px \u002F\n164px produce esattamente 3 ossa da 320px \u002F 287px \u002F 164px. Il motore non ricade mai su una scala\nartificiale ",[159,331,332],{},"100% \u002F 90% \u002F 75%"," quando la larghezza reale di ogni riga è disponibile; solo quando\nnon esiste alcuna informazione di layout testuale (ad es. una foglia vuota) ricade sul box\ndell'elemento stesso.",[277,335,336,339,340,290,342,290,345,348,349,351,352,354,355,358],{},[154,337,338],{},"Immagini e avatar"," — un osso ",[159,341,245],{},[159,343,344],{},"\u003Cpicture>",[159,346,347],{},"\u003Cvideo>"," mantiene larghezza, altezza e\naspect ratio reali dell'elemento (mai deformato in un quadrato). Un elemento pressoché quadrato\ncon un raggio visivamente circolare diventa un ",[159,350,196],{},": un vero ",[159,353,318],{}," quando risulta\ncompletamente rotondo, oppure un ",[159,356,357],{},"\u003Crect rx>"," che rispecchia il raggio misurato quando è invece un\nquadrato con angoli arrotondati.",[277,360,361,364,365,368,369,290,372,290,375,378,379,382],{},[154,362,363],{},"Struttura flex e grid"," — poiché ogni discendente viene disegnato nella propria posizione\nassoluta reale (relativa all'host), una grid non collassa mai in una lista verticale e una riga\nflex non collassa mai in una pila: i gap e gli allineamenti sono impliciti nelle coordinate\nmisurate. Lo strato di scansione registra inoltre, per ogni container flex\u002Fgrid, ",[159,366,367],{},"display",",\n",[159,370,371],{},"flex-direction",[159,373,374],{},"justify-content",[159,376,377],{},"align-items"," e il ",[159,380,381],{},"gap"," riga\u002Fcolonna, a scopo di verifica e\nper DevTools\u002FExplain — questi metadati sono una registrazione di ciò che il renderer riproduce\ngià geometricamente, non un'approssimazione separata.",[150,384,385],{},"Il renderer è deterministico: gli stessi nodi scansionati producono sempre lo stesso markup SVG —\nnessuna lunghezza di riga casuale, nessuna variazione estetica.",[175,387,389],{"id":388},"come-viene-dipinto-un-osso","Come viene dipinto un osso",[274,391,392,406,423],{},[277,393,394,395,397,398,401,402,405],{},"Lo strato di scansione non muta mai il sottoalbero reale — legge solo ",[159,396,285],{},"\ne ",[159,399,400],{},"getComputedStyle()",". Il contenuto reale viene nascosto con ",[159,403,404],{},"visibility: hidden"," (il suo box di\nlayout resta al suo posto, ed è proprio questo a rendere possibile la misurazione).",[277,407,408,409,411,412,415,416,418,419,422],{},"Il renderer SVG trasforma i nodi misurati in un unico overlay ",[159,410,172],{}," posizionato in assoluto:\nogni osso è un ",[159,413,414],{},"\u003Crect>"," (o un ",[159,417,318],{}," per avatar\u002Fradio), riempito da un ",[159,420,421],{},"\u003ClinearGradient>","\ncondiviso e namespacizzato che pilota lo shimmer per tutte le forme contemporaneamente.",[277,424,425,426,429],{},"Disattivare lo skeleton rimuove l'overlay e ripristina ",[159,427,428],{},"visibility: visible"," — il markup reale\nnon è mai stato toccato.",[175,431,433],{"id":432},"riscansione","Riscansione",[150,435,436,437,440,441,444],{},"Un ",[159,438,439],{},"MutationObserver"," con debounce osserva il sottoalbero, così i contenuti aggiunti dopo la prima\nscansione (liste lazy, componenti asincroni) vengono skeletonizzati automaticamente. Puoi anche\nchiamare ",[159,442,443],{},"refresh()"," manualmente.",[175,446,448],{"id":447},"mescolare-con-skeleton-manuali","Mescolare con skeleton manuali",[150,450,451,452,455],{},"I componenti manuali ",[159,453,454],{},"Skeleton*"," vengono riconosciuti e lasciati intatti dal motore, così puoi\nmescolare liberamente skeleton automatici e composti a mano nello stesso albero.",[175,457,459],{"id":458},"pilotarlo","Pilotarlo",[150,461,462,463,467,468,471,472,471,475,368,478,471,481,484],{},"Usa le ",[464,465,466],"a",{"href":134},"direttive"," — ",[159,469,470],{},"v-skeleton-ignore",", ",[159,473,474],{},"v-skeleton-keep",[159,476,477],{},"v-skeleton-replace",[159,479,480],{},"v-skeleton-union",[159,482,483],{},"v-skeleton-shimmer"," — per sovrascrivere il motore dove serve precisione.",{"title":269,"searchDepth":486,"depth":486,"links":487},3,[488,490,491,492,493,494],{"id":177,"depth":489,"text":178},2,{"id":252,"depth":489,"text":253},{"id":388,"depth":489,"text":389},{"id":432,"depth":489,"text":433},{"id":447,"depth":489,"text":448},{"id":458,"depth":489,"text":459},"Come il motore di scansione del DOM classifica gli elementi e preserva il layout.","md",{},true,{"title":125,"description":495},"QPLBKSBRnXdVZh6x-0MgDbq1M1HIwDVUiVit_aNkITE",1783713299244]