{"id":18441872,"url":"https://github.com/camme/progressive-loadable","last_synced_at":"2026-04-17T06:34:20.674Z","repository":{"id":48012833,"uuid":"189748634","full_name":"camme/progressive-loadable","owner":"camme","description":"Progressively load and hydrate components when they are in the viewport.","archived":false,"fork":false,"pushed_at":"2023-01-04T21:47:18.000Z","size":209,"stargazers_count":2,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-20T15:24:43.936Z","etag":null,"topics":["hydration","loadable","progressive","react","ssr"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/camme.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-01T15:29:25.000Z","updated_at":"2019-10-24T17:50:39.000Z","dependencies_parsed_at":"2023-02-02T21:01:18.334Z","dependency_job_id":null,"html_url":"https://github.com/camme/progressive-loadable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/camme/progressive-loadable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camme%2Fprogressive-loadable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camme%2Fprogressive-loadable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camme%2Fprogressive-loadable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camme%2Fprogressive-loadable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/camme","download_url":"https://codeload.github.com/camme/progressive-loadable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camme%2Fprogressive-loadable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31918698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["hydration","loadable","progressive","react","ssr"],"created_at":"2024-11-06T06:39:38.317Z","updated_at":"2026-04-17T06:34:20.636Z","avatar_url":"https://github.com/camme.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ProgressiveLoadable\n\nThis helps you progressively load and hydrate components when they are in the viewport. It should be used together with [react-loadable](https://www.npmjs.com/package/react-loadable)\nto enable code splitting.\n\nCode splitting and progressive hydration are extremly effective tricks to downsize the first chunks of javascript you load in the browser, but still \nshowing the correct content the user loads into the browser (with server side rendering).\n\nSo instead of just server side render and then hydrate everything, \nyou render everything on the server, then hydrate the parst that are visible and wait with everything that is outside the viewport until the user scrolls. \nWhen your component is visible, you load the chunks and hydrate the last part.\n\n\n## How to use\n\nA normal ```react-loadable``` is loaded like this\n\n```javascript\n\nimport Loadable from 'react-loadable';\nimport Loading from './my-loading-component';\n \nconst LoadableComponent = Loadable({\n  loader: () =\u003e import('./my-component'),\n  loading: Loading,\n});\n \nexport default class App extends React.Component {\n  render() {\n    return \u003cLoadableComponent/\u003e;\n  }\n}\n```\n\nWith ProgressiveLoadable you only need to change it like this:\n\n```javascript\n\nimport Loadable from 'react-loadable';\nimport Loading from './my-loading-component';\n \nconst LoadableComponent = Loadable({\n  loader: () =\u003e import('./my-component'),\n  loading: Loading,\n});\n\n// THIS IS THE EXTRA WRAPPER\nconst ProgressiveLoadableComponent = ProgressiveLoadable(LoadableComponent);\n \nexport default class App extends React.Component {\n  render() {\n    return \u003cProgressiveLoadable/\u003e; // THIS IS CHANGED AS WELL\n  }\n}\n\n```\n\nIf you want to change the default threshold (default is ```.3```, ie 30% of the component needs to be visible), you just send it as options:\n\n```javascript\n\nimport Loadable from 'react-loadable';\nimport Loading from './my-loading-component';\n \nconst LoadableComponent = Loadable({\n  loader: () =\u003e import('./my-component'),\n  loading: Loading,\n});\n\nconst ProgressiveLoadableComponent = ProgressiveLoadable(LoadableComponent, { threshold: .5 });\n \nexport default class App extends React.Component {\n  render() {\n    return \u003cProgressiveLoadable/\u003e;\n  }\n}\n\n```\n\n## Other info\n\nThis uses the IntersectionObserver, which doesnt exists in ie 11. In ie 11, or other browsers without the IntersectionObserver, it will just assume the component\nis in the viewport.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamme%2Fprogressive-loadable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamme%2Fprogressive-loadable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamme%2Fprogressive-loadable/lists"}