{"id":15736666,"url":"https://github.com/thejohnfreeman/loadable","last_synced_at":"2025-03-13T07:32:18.526Z","repository":{"id":57165972,"uuid":"167602688","full_name":"thejohnfreeman/loadable","owner":"thejohnfreeman","description":"Like react-loadable, but better.","archived":false,"fork":false,"pushed_at":"2019-02-12T15:56:15.000Z","size":25,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-27T07:32:40.424Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/thejohnfreeman.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}},"created_at":"2019-01-25T19:35:12.000Z","updated_at":"2023-10-31T16:29:13.000Z","dependencies_parsed_at":"2022-08-30T15:21:22.834Z","dependency_job_id":null,"html_url":"https://github.com/thejohnfreeman/loadable","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejohnfreeman%2Floadable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejohnfreeman%2Floadable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejohnfreeman%2Floadable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejohnfreeman%2Floadable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thejohnfreeman","download_url":"https://codeload.github.com/thejohnfreeman/loadable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221351310,"owners_count":16802981,"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-04T01:41:02.332Z","updated_at":"2024-10-24T21:21:50.011Z","avatar_url":"https://github.com/thejohnfreeman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# loadable\n\nLike [`react-loadable`](https://github.com/jamiebuilds/react-loadable), but\nbetter.\n\n[![npm](https://img.shields.io/npm/v/@thejohnfreeman/loadable.svg)](https://www.npmjs.com/package/@thejohnfreeman/loadable)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@thejohnfreeman/loadable.svg?style=flat)](https://bundlephobia.com/result?p=@thejohnfreeman/loadable)\n[![code style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)\n[![build status](https://travis-ci.org/thejohnfreeman/loadable.svg?branch=master)](https://travis-ci.org/thejohnfreeman/loadable)\n\n\n## Motivation\n\n`react-loadable` has some problems. As of this writing, there are 39 open pull\nrequests and issues are closed. The creator and maintainer seems to have\nabandoned the project, perhaps in favor of\n[`@loadable/component`](https://www.smooth-code.com/open-source/loadable-components/),\nbut perhaps because of [his emotional instability](https://archive.fo/0ZYam).\n\nThe general idea of `react-loadable` is that you give it an async function,\n`load`, that returns a component type (not a component or element), `Target`,\nand it will give you a new component type, `Proxy`. The first time an element\nof `Proxy` is rendered, it will save its props, call `load`, and return\na placeholder \"loading\" element while it waits. Once `load` returns with\n`Target`, the proxy component will update itself with an element of type\n`Target`, passing along the props it saved.\n\nWhat I wanted initially, was the ability to use the props in my `load`\nfunction, but [even `@loadable/component` has\nthat](https://www.smooth-code.com/open-source/loadable-components/docs/dynamic-import/).\nWhat I want now is to pass an async function that takes the props and returns\nan element, not just the component type. Then I can use it for fetching\nresources, not just for code-splitting.\n\n\n## Usage\n\n[Code splitting](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/):\n\n```typescript\nimport loadable from '@thejohnfreeman/loadable'\nconst Proxy = loadable()(() =\u003e import('./Target'))\n// \u003cProxy /\u003e\n```\n\nResource loading:\n\n```typescript\nimport loadable from '@thejohnfreeman/loadable'\nconst AsyncProduct = loadable()(async ({ productId }) =\u003e {\n  try {\n    const product = await backend.getProduct(productId)\n  } catch (error) {\n    return \u003cError error={error} /\u003e\n  }\n  return \u003cProduct product={product} /\u003e\n})\n// \u003cAsyncProduct productId={productId} /\u003e\n```\n\n## Options\n\nOptions are passed to the call to `loadable`, not to the function it returns,\nwhich takes the `load` function.\n\n- `delay :: number`\n\n  Number of milliseconds to wait before showing the placeholder (to avoid\n  a flicker of content). The default is 200.\n\n- `Placeholder :: React.ComponentType`\n\n  The placeholder component type to show while waiting for the target. It will\n  be given the same props as the target, in case you want to make use of them.\n  The default is the text \"Loading...\".\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthejohnfreeman%2Floadable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthejohnfreeman%2Floadable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthejohnfreeman%2Floadable/lists"}