{"id":16833110,"url":"https://github.com/balthazar/placeloader","last_synced_at":"2026-03-08T09:37:56.547Z","repository":{"id":75551486,"uuid":"83466722","full_name":"balthazar/placeloader","owner":"balthazar","description":":stopwatch: Hold things in place, while loading.","archived":false,"fork":false,"pushed_at":"2017-10-04T18:52:28.000Z","size":79,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-11T04:15:47.026Z","etag":null,"topics":["loader","loaders","loading","loading-animations","placeloader","react"],"latest_commit_sha":null,"homepage":"https://placeloader.surge.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/balthazar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-02-28T18:40:07.000Z","updated_at":"2018-11-28T14:22:24.000Z","dependencies_parsed_at":"2023-06-06T21:15:36.482Z","dependency_job_id":null,"html_url":"https://github.com/balthazar/placeloader","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balthazar%2Fplaceloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balthazar%2Fplaceloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balthazar%2Fplaceloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balthazar%2Fplaceloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/balthazar","download_url":"https://codeload.github.com/balthazar/placeloader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248339226,"owners_count":21087215,"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":["loader","loaders","loading","loading-animations","placeloader","react"],"created_at":"2024-10-13T11:52:22.175Z","updated_at":"2026-03-08T09:37:56.493Z","avatar_url":"https://github.com/balthazar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# placeloader\n\n\u003e Hold things in place, while loading.\n\n    yarn add placeloader\n\n#### Introduction\n\nThis project is aimed at getting rid of FOAC, aka *Flash of Absent Content*.\n\nSee the [purpose section](#purpose) below for more info. Checkout the vanilla [website](https://placeloader-vanilla.surge.sh) if you don't care about React.\n\n#### Install\n\nImport the stylesheet the way your bundler allows you to.\n\n```scss\n@import '~placeloader/main';\n```\n\n#### Usage\n\nAlthough it would be easier for you (and me) to look at the [docs \u0026 demos](https://placeloader.surge.sh) directly, here's a simple example of what you could do.\n\n```javascript\nimport PlaceLoader, { Image } from 'placeloader'\n\n\u003cPlaceLoader style={{ width: '10rem', height: '2rem' }} isLoading={isLoading}\u003e\n  \u003cdiv\u003e{'I will only render once the isLoading prop is false'}\u003c/div\u003e\n\u003c/PlaceLoader\u003e\n\n\u003cImage src=\"http://yolo.png\" isLoading={isLoading} style={{ width: '10rem', height: '10rem' }} /\u003e\n```\n\nInteresting fact is that you could provide a function as a children, allowing you to get\nrid of the annoying loading checks and potential errors.\n\n```javascript\nrender () {\n\n  const { isLoading, data } = this.props\n  // While loading, data is undefined. Accessing a property of this object would throw.\n\n  return (\n    \u003cPlaceLoader style={style} isLoading={isLoading}\u003e\n      {() =\u003e (\n        \u003cdiv\u003e{data.name}\u003c/div\u003e\n      )}\n    \u003c/PlaceLoader\u003e\n  )\n\n}\n```\n\n#### Purpose\n\nHow loading states are handled in most of applications could be drastically improved, and would have a huge impact on the UX.\n\nLet's say you're querying an API, or doing any async stuff (uncommon I know).\nUsually you'll show a loading icon between the time you start loading, and when the content is displayed on the page.\n\nOnce your operation has finished, you just have to hide the loader and show the content.\nThat's good, but there will be an upsetting change of your layout.\n\n\u003cimg alt='problem' title='problem' src='http://i.imgur.com/TLpuHZE.gif'\u003e\n\nThere's a few ways to resolve this issue, and one of them is to make the loader the exact same size of the content that it\nwill introduce. You could also transform the sizes using a similar concept as seen in [state-transitions](https://github.com/jacobp100/state-transitions), but still not as easy. I decided to focus on the first solution.\n\nJust to recap, preventing FOAC simply requires you to set a fixed width and height on your loader, that will be the same as your content. This package has been made to provide some sort of base api and ideas for people to get started.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalthazar%2Fplaceloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbalthazar%2Fplaceloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalthazar%2Fplaceloader/lists"}