{"id":16983187,"url":"https://github.com/sudoaugustin/skel-ui","last_synced_at":"2025-04-12T03:10:44.076Z","repository":{"id":257806046,"uuid":"863340398","full_name":"sudoaugustin/skel-ui","owner":"sudoaugustin","description":"Lightweight and powerful skeleton library for React and React Native.","archived":false,"fork":false,"pushed_at":"2025-03-03T09:50:24.000Z","size":1408,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T22:41:26.063Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://skel-ui.augustin.zip/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sudoaugustin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-26T06:11:40.000Z","updated_at":"2025-03-03T09:50:28.000Z","dependencies_parsed_at":"2024-10-01T15:43:32.182Z","dependency_job_id":"3547946f-30e8-443c-9979-e89d251e0104","html_url":"https://github.com/sudoaugustin/skel-ui","commit_stats":null,"previous_names":["sudoaugustin/skel-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudoaugustin%2Fskel-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudoaugustin%2Fskel-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudoaugustin%2Fskel-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudoaugustin%2Fskel-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sudoaugustin","download_url":"https://codeload.github.com/sudoaugustin/skel-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248510000,"owners_count":21116131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T02:27:58.429Z","updated_at":"2025-04-12T03:10:44.064Z","avatar_url":"https://github.com/sudoaugustin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Skel UI Banner](.github/assets/banner.png)\n\nSkel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.\n\n## Ideology\n\nModern applications often use skeleton screens to enhance user experience during data loading. However, managing these screens manually can be time-consuming and repetitive. When the UI changes, the skeleton must also be updated to avoid UI mismatches.\n\nCurrent libraries require developers to handle the skeleton loading logic in multiple places. For instance, if you have a card with a title and a description, you'll need to implement the skeleton rendering logic twice. This is frustrating and compromises the overall developer experience.\n\nSo, many developers end up just using spinners which pisses the CEOs and clients.\n\nThe goal is to make skeletons a fundamental feature of applications instead of a time-consuming task by solving the above problems. The developers should focus on building features rather than managing loading states.\n\n## Code Overview\n\n```tsx\nimport * as Skel from \"@skel-ui/react\";\nimport Image from \"@ui/image\";\n\nexport default function PostCard() {\n  const { post, isLoading } = usePost();\n\n  return (\n    \u003cSkel.Root isLoading={isLoading}\u003e\n      \u003cdiv className=\"group w-full max-w-80 p-2.5 bg-white border border-slate-200 rounded-lg overflow-hidden duration-300\"\u003e\n        \u003cSkel.Item\n          as={Image}\n          src={post?.image}\n          className=\"rounded aspect-[800/530] duration-150 loaded:group-hover:scale-110\"\n        /\u003e\n        \u003cSkel.h1 className=\"text-xl font-bold mt-4 loading:max-w-48\"\u003e{post?.title}\u003c/Skel.h1\u003e\n        \u003cSkel.p className=\"text-sm my-2 loading:h-[3.75rem]\"\u003e{post?.description}\u003c/Skel.p\u003e\n      \u003c/div\u003e\n    \u003c/Skel.Root\u003e\n  );\n}\n```\n\n## Documentation\n\nFor official documentation, please visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)\n\n## Comaprision with React Loading Skeleton\n\n| Description                               | Skel UI | React Loading Skeleton |\n| ----------------------------------------- | ------- | ---------------------- |\n| Has multiline support                     | No      | Yes 🏆                 |\n| Sync User Interface                       | Yes 🤝  | Yes                    |\n| Automatic correct sizing                  | Yes 🤝  | Yes                    |\n| Loading logic in one place                | Yes 🏆  | No                     |\n| Require prop drilling for loading state   | No 🏆   | Yes                    |\n| Number of animations                      | 2 🏆    | 1                      |\n| Customize animation timing                | Yes 🤝  | Yes                    |\n| Custom animation                          | Yes 🏆  | No                     |\n| First-class support for Tailwind          | Yes 🏆  | No                     |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudoaugustin%2Fskel-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsudoaugustin%2Fskel-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudoaugustin%2Fskel-ui/lists"}