{"_id":"@department-of-veterans-affairs/clinical-design-system-loader","_rev":"9-99dcdd6881ae5700e438624c7af7d97f","name":"@department-of-veterans-affairs/clinical-design-system-loader","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@department-of-veterans-affairs/clinical-design-system-loader","version":"1.0.1","author":{"name":"@department-of-veterans-affairs/clinical-design-system"},"license":"MIT","_id":"@department-of-veterans-affairs/clinical-design-system-loader@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":"83bd2d1d25106a0151329863a4558c521e73baa5","tarball":"https://registry.npmjs.org/@department-of-veterans-affairs/clinical-design-system-loader/-/clinical-design-system-loader-1.0.1.tgz","fileCount":11,"integrity":"sha512-CwESR0+cwZb2QODjlTGVAsa21aLjg3VwJiUskQDEtCBAaDPhIvxdM8ulJYwN+zHrC1lIC+ZPXfsiVLhQdkXtSw==","signatures":[{"sig":"MEYCIQCNJ71slv13l5/lNZWvS6NEWjFmgVNelj5sy+FTjWi6yQIhAIZ2RNglqKmIjoDRhd+q7yhILzprYKgAhohDrwxe17Um","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36632},"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":"8a5c433ca14d8a674f87aafa6242ad73a1c8ddf1","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-loader_1.0.1_1761838189512_0.8363248521154139","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@department-of-veterans-affairs/clinical-design-system-loader","version":"1.0.2","author":{"name":"@department-of-veterans-affairs/clinical-design-system"},"license":"MIT","_id":"@department-of-veterans-affairs/clinical-design-system-loader@1.0.2","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":"3d7a92683e8000d99544e452b708df322ed231d0","tarball":"https://registry.npmjs.org/@department-of-veterans-affairs/clinical-design-system-loader/-/clinical-design-system-loader-1.0.2.tgz","fileCount":11,"integrity":"sha512-bk/GOcmmP7+IDLzzMRnVFelSwGDWGjHyD6pZvK8hu3U0ttJtuu7f4+Nz7+pAww7QUM0WL4f6atbv01yRrNpLzA==","signatures":[{"sig":"MEUCIGoxutj2CaSlGUJUBnxDqx7QyD2u3rfB1DbPuzQeoSNtAiEAwnAMmr6HHL/SDN3T8RcEhQAHgoTCTZ0njLWQIE0JvVk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35378},"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":"8a5c433ca14d8a674f87aafa6242ad73a1c8ddf1","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-loader_1.0.2_1761838462587_0.6368144924214556","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-30T15:29:49.394Z","modified":"2026-04-13T19:56:39.297Z","1.0.1":"2025-10-30T15:29:49.707Z","1.0.2":"2025-10-30T15:34:22.800Z"},"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":"# Loader\n\nA Loader component is a visual indication that content is being loaded or processed. It displays a spinning animation accompanied by the text \"Loading...\". This component is essential for providing feedback to users during data fetching or processing.\n\n## Installation instructions\n\n` yarn add @department-of-veterans-affairs/clinical-design-system-loader`\n`npm install @department-of-veterans-affairs/clinical-design-system-loader`\n\n## Guidance\n\nPlease note that this component is only available in the React Component library.\nWhen to use a loader\n\n- Fetching data. Display the Loader component while fetching data from an API.\n- Processing. Indicate that a process is ongoing, such as form submission or file upload.\n\nUse a progress indicator for any action that takes longer than about 1 second.\n\nUse a spinner or looped animation to offer feedback that the system is working, but it doesn’t give any information about how long the user will have to wait.\nBest Practices\n\nIn Nielson Norman’s Ten Usability Heuristics, the first principal Visibility of System Status, states that the design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.\n\nAppropriate feedback serves to keep users informed of the current status and to allow them to steer the interaction in the right direction, without wasting effort. Loading indicators communicate that the system is working, and reduce uncertainty — preventing users from tapping the same button multiple times because they weren’t sure if the first time worked.\n\n## Accessibility\n\n- Keyboard Navigation. Ensure the user can navigate to the Loader component using the Tab key.\n- Screen Readers. Provide an accessible name for screen readers using ARIA attributes.\n\n## Technical Documentation\n\nVACDS Specific functionality: A Loader component is a visual indication that content is being loaded or processed. It displays a spinning animation accompanied by the text \"Loading...\". This component is essential for providing feedback to users during data fetching or processing.\n\naria-live and aria-busy can be used to inform screen readers about the status of an element. aria-live has three options: \"off,\" \"polite,\" and \"assertive,\" each indicating different levels of urgency for announcing updates. These attributes help ensure screen readers convey dynamic content and busy states to users effectively.\n\nThe alignLeft and alignTop properties can be adjusted to position the loader within its container. For example, setting alignLeft to '-20px' and alignTop to '10px' will position the loader 20 pixels from the left and 10 pixels from the top edges.\n\n### Props\n\n```\nloaderRole\nThe role attribute for the loader, typically set to \"status\" for accessibility purposes.\nstring\n\n\t-\nariaLive\nThe aria-live attribute, indicating the type of updates the screen reader should announce.\n\"off\"\"assertive\"\"polite\"\n\t-\t-\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-\t-\ncenterLabel\nThe label to display at the center of the loader, providing additional context.\nstring\n\n\t-\nalignLeft\nAdjusts the left position of the centerLabel within its container.\nstring\n\t-\t-\nalignTop\nAdjusts the top position of the centerLabel within its container.\nstring\n```\n","readmeFilename":"README.md"}