{"_id":"@department-of-veterans-affairs/clinical-design-system-skeleton","_rev":"9-4e50d9b5b72a13e85bc1e50b0977d40f","name":"@department-of-veterans-affairs/clinical-design-system-skeleton","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@department-of-veterans-affairs/clinical-design-system-skeleton","version":"1.0.0","author":{"name":"@department-of-veterans-affairs/clinical-design-system"},"license":"MIT","_id":"@department-of-veterans-affairs/clinical-design-system-skeleton@1.0.0","maintainers":[{"name":"jhonnyoddball","email":"jhonny.gonzalez@oddball.io"},{"name":"caseflow","email":"caseflow@va.gov"},{"name":"powellkerry","email":"kerrywpowell@gmail.com"},{"name":"va_vsp_bot_npm","email":"VETSGOV-DEVOPS@listserv.gsa.gov"},{"name":"mdbenjam","email":"mdbenjam@gmail.com"},{"name":"lowellrex","email":"lowell@navapbc.com"},{"name":"mlumetta_adhoc","email":"mike.lumetta@adhocteam.us"},{"name":"tlei123","email":"tclei2009@gmail.com"},{"name":"zurbergram","email":"mattcroth@gmail.com"},{"name":"rtwell","email":"ryan.thurlwell@va.gov"},{"name":"mottie","email":"wowmotty@gmail.com"},{"name":"cohnjesse","email":"jesse.cohn@adhocteam.us"},{"name":"zacharymorel","email":"zacharyjmorel@gmail.com"},{"name":"bsmartin-ep","email":"brian.martin@empiricalpath.com"},{"name":"ddzienva","email":"dariusz.dzien@adhocteam.us"},{"name":"dat-gcio","email":"dtran@governmentcio.com"},{"name":"it-harrison","email":"ian.harrison@adhocteam.us"},{"name":"jamigibbs","email":"jami0821@gmail.com"},{"name":"beaugrantham-va","email":"beau.grantham@va.gov"},{"name":"troettger","email":"timjroettger@gmail.com"},{"name":"cbonade-oddball","email":"curt.bonade@oddball.io"},{"name":"rhasselle-oddball","email":"robert.hasselle@oddball.io"},{"name":"va-albers","email":"steve.albers@va.gov"},{"name":"helene-mccarron","email":"helene.mccarron@va.gov"},{"name":"chrisgeorge","email":"christopher.george7@va.gov"}],"homepage":"https://github.com/department-of-veterans-affairs/clinical-design-system#readme","bugs":{"url":"https://github.com/department-of-veterans-affairs/clinical-design-system/issues"},"dist":{"shasum":"3dcc74db68891a0667046615af7980bd171ee584","tarball":"https://registry.npmjs.org/@department-of-veterans-affairs/clinical-design-system-skeleton/-/clinical-design-system-skeleton-1.0.0.tgz","fileCount":11,"integrity":"sha512-KjSOaF6i5vLH6dEb0J9Lnyx/EKWNZ6Z032EZbaxlLWE4CThHukAQMqj98TyxUALnxKbMUyt5HQxtkcN3cPOEaQ==","signatures":[{"sig":"MEUCIQCdw0M4Kf3iZNiU6baULHwpQJlacBVKpek/mrFHH9gE/wIgEczhePaTBGea7sIKc4QP/XADK6ypyNIHU4qmuNlb+Lo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2124799},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"browser":"./dist/index.iife.js","default":"./dist/index.umd.cjs","require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./dist/core/css/*.css":"./dist/core/css/*.css"},"gitHead":"272e6860acc199db8145d6285ddbb538241c72a1","scripts":{"build":"tsc --p ../../tsconfig-build.json && vite build --config vite.config.ts","build-core":"tsc --p ./tsconfig-build.json && vite build --config core.vite.config.ts && yarn build-tokens"},"_npmUser":{"name":"helene-mccarron","email":"helene.mccarron@va.gov"},"repository":{"url":"git+ssh://git@github.com/department-of-veterans-affairs/clinical-design-system.git","type":"git","directory":"packages/clinical-design-system/packages/skeleton"},"_npmVersion":"10.8.1","description":"A clinician-facing design system built for the Department of Veterans Affairs.","directories":{},"_nodeVersion":"20.16.0","dependencies":{"vite":"^7.1.7","@uswds/uswds":"3.13.0","@vitejs/plugin-react":"^4.7.0","@trussworks/react-uswds":"^10.0.2"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"yarn@4.5.0","devDependencies":{"glob":"^11.0.3","jest":"^30.1.3","sass":"^1.93.0","jsdom":"^26.1.0","react":"19.1.1","eslint":"^9.36.0","ts-jest":"^29.4.4","prettier":"^3.6.2","@types/d3":"^7.4.3","react-dom":"19.1.1","storybook":"^9.1.7","stylelint":"^16.24.0","classnames":"^2.5.1","prop-types":"^15.8.1","typescript":"~5.9.2","@types/jest":"^30.0.0","@types/node":"~20.16.15","@types/react":"^19.1.13","jest-preview":"^0.3.2","@axe-core/react":"^4.10.2","@faker-js/faker":"^9.9.0","vite-plugin-dts":"^4.5.4","@playwright/test":"^1.55.0","@types/react-dom":"^19.1.9","focus-trap-react":"^11.0.4","style-dictionary":"^5.0.4","vite-plugin-svgr":"^4.5.0","identity-obj-proxy":"^3.0.0","@testing-library/dom":"^10.4.1","@storybook/addon-docs":"^9.1.7","@storybook/react-vite":"^9.1.7","@storybook/addon-links":"^9.1.7","@testing-library/react":"^16.3.0","jest-environment-jsdom":"^30.1.2","eslint-plugin-storybook":"^9.1.7","@testing-library/jest-dom":"^6.8.0","@typescript-eslint/parser":"^8.44.1","eslint-plugin-react-hooks":"^5.2.0","vite-plugin-lib-inject-css":"^2.2.2","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.20","@typescript-eslint/eslint-plugin":"^8.44.1","@department-of-veterans-affairs/css-library":"^0.25.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","focus-trap-react":"10.2.3"},"_npmOperationalInternal":{"tmp":"tmp/clinical-design-system-skeleton_1.0.0_1761748632709_0.11335066629882551","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@department-of-veterans-affairs/clinical-design-system-skeleton","version":"1.0.1","author":{"name":"@department-of-veterans-affairs/clinical-design-system"},"license":"MIT","_id":"@department-of-veterans-affairs/clinical-design-system-skeleton@1.0.1","maintainers":[{"name":"jhonnyoddball","email":"jhonny.gonzalez@oddball.io"},{"name":"caseflow","email":"caseflow@va.gov"},{"name":"powellkerry","email":"kerrywpowell@gmail.com"},{"name":"va_vsp_bot_npm","email":"VETSGOV-DEVOPS@listserv.gsa.gov"},{"name":"mdbenjam","email":"mdbenjam@gmail.com"},{"name":"lowellrex","email":"lowell@navapbc.com"},{"name":"mlumetta_adhoc","email":"mike.lumetta@adhocteam.us"},{"name":"tlei123","email":"tclei2009@gmail.com"},{"name":"zurbergram","email":"mattcroth@gmail.com"},{"name":"rtwell","email":"ryan.thurlwell@va.gov"},{"name":"mottie","email":"wowmotty@gmail.com"},{"name":"cohnjesse","email":"jesse.cohn@adhocteam.us"},{"name":"zacharymorel","email":"zacharyjmorel@gmail.com"},{"name":"bsmartin-ep","email":"brian.martin@empiricalpath.com"},{"name":"ddzienva","email":"dariusz.dzien@adhocteam.us"},{"name":"dat-gcio","email":"dtran@governmentcio.com"},{"name":"it-harrison","email":"ian.harrison@adhocteam.us"},{"name":"jamigibbs","email":"jami0821@gmail.com"},{"name":"beaugrantham-va","email":"beau.grantham@va.gov"},{"name":"troettger","email":"timjroettger@gmail.com"},{"name":"cbonade-oddball","email":"curt.bonade@oddball.io"},{"name":"rhasselle-oddball","email":"robert.hasselle@oddball.io"},{"name":"va-albers","email":"steve.albers@va.gov"},{"name":"helene-mccarron","email":"helene.mccarron@va.gov"},{"name":"chrisgeorge","email":"christopher.george7@va.gov"}],"homepage":"https://github.com/department-of-veterans-affairs/clinical-design-system#readme","bugs":{"url":"https://github.com/department-of-veterans-affairs/clinical-design-system/issues"},"dist":{"shasum":"340c249ede9d063dfd44595c731b0d1e0156b765","tarball":"https://registry.npmjs.org/@department-of-veterans-affairs/clinical-design-system-skeleton/-/clinical-design-system-skeleton-1.0.1.tgz","fileCount":11,"integrity":"sha512-6keEy0z052maW8mJG3A19WyalY3YS9r+moabjvjZArcmF5lI1tapE9iTpuueehBVNGQLKRQlxk0jfAt1tebPzA==","signatures":[{"sig":"MEMCIGlf8SlfiK2X3iQNEB/Y8aRzW96aKorLfOnXrPukISB2Ah9LeGf7s9bHLiTZ3I8dnx7HGN0/OY1l56cU0Fxlmrpc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2124856},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"browser":"./dist/index.iife.js","default":"./dist/index.umd.cjs","require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./dist/core/css/*.css":"./dist/core/css/*.css"},"gitHead":"272e6860acc199db8145d6285ddbb538241c72a1","scripts":{"build":"tsc --p ../../tsconfig-build.json && vite build --config vite.config.ts","build-core":"tsc --p ./tsconfig-build.json && vite build --config core.vite.config.ts && yarn build-tokens"},"_npmUser":{"name":"helene-mccarron","email":"helene.mccarron@va.gov"},"repository":{"url":"git+ssh://git@github.com/department-of-veterans-affairs/clinical-design-system.git","type":"git","directory":"packages/clinical-design-system/packages/skeleton"},"_npmVersion":"10.8.1","description":"A clinician-facing design system built for the Department of Veterans Affairs.","directories":{},"_nodeVersion":"20.16.0","dependencies":{"vite":"^7.1.7","@uswds/uswds":"3.13.0","@vitejs/plugin-react":"^4.7.0","@trussworks/react-uswds":"^10.0.2"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"yarn@4.5.0","devDependencies":{"glob":"^11.0.3","jest":"^30.1.3","sass":"^1.93.0","jsdom":"^26.1.0","react":"19.1.1","eslint":"^9.36.0","ts-jest":"^29.4.4","prettier":"^3.6.2","@types/d3":"^7.4.3","react-dom":"19.1.1","storybook":"^9.1.7","stylelint":"^16.24.0","classnames":"^2.5.1","prop-types":"^15.8.1","typescript":"~5.9.2","@types/jest":"^30.0.0","@types/node":"~20.16.15","@types/react":"^19.1.13","jest-preview":"^0.3.2","@axe-core/react":"^4.10.2","@faker-js/faker":"^9.9.0","vite-plugin-dts":"^4.5.4","@playwright/test":"^1.55.0","@types/react-dom":"^19.1.9","focus-trap-react":"^11.0.4","style-dictionary":"^5.0.4","vite-plugin-svgr":"^4.5.0","identity-obj-proxy":"^3.0.0","@testing-library/dom":"^10.4.1","@storybook/addon-docs":"^9.1.7","@storybook/react-vite":"^9.1.7","@storybook/addon-links":"^9.1.7","@testing-library/react":"^16.3.0","jest-environment-jsdom":"^30.1.2","eslint-plugin-storybook":"^9.1.7","@testing-library/jest-dom":"^6.8.0","@typescript-eslint/parser":"^8.44.1","eslint-plugin-react-hooks":"^5.2.0","vite-plugin-lib-inject-css":"^2.2.2","@testing-library/user-event":"^14.6.1","eslint-plugin-react-refresh":"^0.4.20","@typescript-eslint/eslint-plugin":"^8.44.1","@department-of-veterans-affairs/css-library":"^0.25.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","focus-trap-react":"10.2.3"},"_npmOperationalInternal":{"tmp":"tmp/clinical-design-system-skeleton_1.0.1_1761749214560_0.940192838761752","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-29T14:37:12.606Z","modified":"2026-04-13T19:56:40.423Z","1.0.0":"2025-10-29T14:37:12.980Z","1.0.1":"2025-10-29T14:46:54.853Z"},"bugs":{"url":"https://github.com/department-of-veterans-affairs/clinical-design-system/issues"},"author":{"name":"@department-of-veterans-affairs/clinical-design-system"},"license":"MIT","homepage":"https://github.com/department-of-veterans-affairs/clinical-design-system#readme","repository":{"url":"git+ssh://git@github.com/department-of-veterans-affairs/clinical-design-system.git","type":"git","directory":"packages/clinical-design-system/packages/skeleton"},"description":"A clinician-facing design system built for the Department of Veterans Affairs.","maintainers":[{"email":"kerrywpowell@gmail.com","name":"powellkerry"},{"email":"VETSGOV-DEVOPS@listserv.gsa.gov","name":"va_vsp_bot_npm"},{"email":"mdbenjam@gmail.com","name":"mdbenjam"},{"email":"mike.lumetta@adhocteam.us","name":"mlumetta_adhoc"},{"email":"tclei2009@gmail.com","name":"tlei123"},{"email":"mattcroth@gmail.com","name":"zurbergram"},{"email":"ryan.thurlwell@va.gov","name":"rtwell"},{"email":"wowmotty@gmail.com","name":"mottie"},{"email":"zacharyjmorel@gmail.com","name":"zacharymorel"},{"email":"brian.martin@empiricalpath.com","name":"bsmartin-ep"},{"email":"ian.harrison@adhocteam.us","name":"it-harrison"},{"email":"jami0821@gmail.com","name":"jamigibbs"},{"email":"beau.grantham@va.gov","name":"beaugrantham-va"},{"email":"timjroettger@gmail.com","name":"troettger"},{"email":"amy.leadem@wilcore.io","name":"amyleademwilcore"},{"email":"matthew.dingee@va.gov","name":"humancompanion-va"},{"email":"edwin.otero@va.gov","name":"ediiotero"},{"email":"christopher.george7@va.gov","name":"chrisgeorge"},{"email":"curt.bonade@oddball.io","name":"cbonade-oddball"},{"email":"robert.hasselle@oddball.io","name":"rhasselle-oddball"},{"email":"steve.albers@va.gov","name":"va-albers"},{"email":"helene.mccarron@va.gov","name":"helene-mccarron"}],"readme":"# Skeleton Loader\n\nA Skeleton Loader is used to display a visual placeholder while content or data is being loaded into the system. It helps communicate system responsiveness and reduces uncertainty, especially in clinical environments where timely data delivery is critical.\n\n## Installation instructions\n\n` yarn add @department-of-veterans-affairs/clinical-design-system-skeleton`\n`npm install @department-of-veterans-affairs/clinical-design-system-skeleton`\n\n## About this component\n\nSkeleton loaders build trust with users by reinforcing that data is actively loading in the area where they expect content to appear. They enhance the user experience by improving perceived performance and reducing cognitive load during wait times.\n\nSkeleton loaders are particularly advantageous when loading large datasets. By allowing data to load incrementally, users can begin interacting with available content without needing to wait for the entire set to finish loading.\n\n## For Designers\n\nThe Skeleton Loader component supports two shape variants to reflect the type of content being loaded. Designers should choose the variant that best reflects the final content to minimize layout shifts.\nVariants\n\nRectangle: Used to represent text-based content, including body text and headers. This shape helps maintain layout consistency during loading by mimicking the dimensions and placement of text blocks.\n\nCircle: Used to represent non-text or decorative elements, such as images or avatars. This variant is helpful when loading areas of the UI that display profile pictures, icons, or other visual elements.\nPattern Example\n\n## Guidance\n\n### When to use\n\n- To visually indicate that data is being fetched, especially for patient charts, health records, dashboards, or structured content areas.\n- When content is broken into sections and loaded progressively (e.g., list views, card grids, or multi-pane layouts).\n- When preventing abrupt layout shifts is important to preserve user orientation.\n\n### When to consider something else\n\n- If loading is brief (under 300ms), skeleton loaders may be unnecessary and create visual distraction.\n- If exact progress feedback is required (e.g., uploading files, syncing), use a progress indicator instead.\n- When supporting screen reader-only users, consider using loading text or ARIA live regions instead of visual skeletons.\n\n### Benefits\n\n- Builds user trust by visually confirming that content is loading.\n- Improves perceived performance and reduces frustration.\n- Enables partial content to be revealed progressively rather than waiting for all data to load.\n- Reduces layout shift, helping maintain visual consistency during transitions.\n\n### Accessibility\n\nThe Skeleton Loader includes built-in accessibility support:\n\n- It uses a default role=\"status\" to politely notify assistive technology (AT) users when the loader appears.\n- The aria-live property can be set to polite, assertive, or off (default) to control announcement behavior.\n- While the loader is active, you should use the ariaBusy boolean prop to indicate loading status. This helps prevent AT from announcing updates before loading is complete.\n- The component respects the user’s “reduce motion” system preference—animations are disabled if motion reduction is enabled.\n\n## Technical Documentation\n\n### Props\n\n```\ncomponent\nThe component used for the root node. Either a string to use a HTML element or a component.\nElementType<any, keyof IntrinsicElements>\n\n\nvariant\nThe type of content that will be rendered.\n\"text\"\"circular\"\"rectangular\"\"rounded\"\n\nrows\nNumber of rows to display. Useful when you want to display a skeleton for multiple rows of items at once.\nnumber\n\t-\ncolumns\nNumber of columns to display. Useful when you want to display a skeleton for a grid.\nnumber\n\n\t-\nheight\nHeight of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.\n\n\t-\nwidth\nWidth of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.\nstringnumber\n\t-\nalign\nThe alignment of each skeleton item. This is useful when you want to align the skeletons in a grid.\n\"center\"\"left\"\"right\"\n\t-\nanimation\nIf true, the skeleton will have a pulse animation.\nboolean\n\t-\n\nrole\nThe role attribute for the skeleton, typically set to \"status\" for accessibility purposes.\n\t-\n\nariaBusy\nIndicates whether an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.\nboolean\n\t-\nariaLive\nThe aria-live attribute, indicating the type of updates the screen reader should announce.\n\"off\"\"assertive\"\"polite\"\n```\n","readmeFilename":"README.md"}