How to use the @loadable/component.loadableReady function in @loadable/component

To help you get started, we’ve selected a few @loadable/component examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / types / loadable__component / loadable__component-tests.tsx View on Github external
// Should allow preloading
    LazyDefaultLibrary.preload();

    // Should allow force loading
    LazyDefaultLibrary.load().then(Component => {
        ;
    });
}

// loadableReady
{
    // Should allow passing callback argument
    loadableReady(() => {});

    // Should return a promise
    loadableReady().then(() => {});

    // Should allow passing options with namespace
    loadableReady(() => {}, { namespace: 'foo' });
}
github code-mcx / react-ssr / src / entry-client.tsx View on Github external
const initialState = (window as any).__INITIAL_STATE__;
  const store = createStore(initialState);
  const App = () => {
    return (
      
        
          
        
      
    );
  };
  return ;
}

// 开始渲染之前加载所需的组件
loadableReady().then(() => {
  ReactDOM.hydrate(createApp(Root), document.getElementById("app"));
});

// 热更新
if (module.hot) {
  module.hot.accept("./App", () => {
    const NewApp = require("./App").default;
    ReactDOM.hydrate(createApp(NewApp), document.getElementById("app"));
  });
}
github osamu38 / react-ssr-starter / src / client.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { HelmetProvider } from 'react-helmet-async';
import { loadableReady } from '@loadable/component';
import configureStore from 'utils/configureStore';
import App from 'components/App';
import { isDevelopment } from 'config/env';

const initialState = window.__INITIAL_STATE__;
const store = configureStore(initialState);
const root = document.getElementById('root');

loadableReady().then(() => {
  if (root) {
    ReactDOM.hydrate(
      
        
          
            
          
        
      ,
      root
    );
  }
});

window.addEventListener('load', () => {
  if ('serviceWorker' in navigator && navigator.serviceWorker) {
github thorgate / django-project-template / {{cookiecutter.repo_name}} / app / src / client.js View on Github external
);
};

const renderApp = (appRoutes) => {
    hydrate(
        ,
        document.getElementById('root'),
    );
};


loadableReady().then(() => setupI18Next(currentLanguage)).then(async () => {
    store.dispatch(setActiveLanguage(currentLanguage));

    renderApp(routes);
});

if (module.hot) {
    module.hot.accept('./configuration/routes', () => {
        renderApp(routes);
    });
}

@loadable/component

React code splitting made easy.

MIT
Latest version published 7 months ago

Package Health Score

81 / 100
Full package analysis