React - DOM oluşturulurken yükleme ekranı görüntüleniyor mu?

Bu, Google Adsense uygulama sayfasından bir örnek. Yükleme ekranı ana sayfadan önce gösterildi.

React ile aynı şeyi nasıl yapacağımı bilmiyorum çünkü React bileşeni tarafından oluşturulan yükleme ekranı yaparsam, daha önce işlenen DOM için beklemek zorunda olduğu için sayfa yüklenirken görüntülenmez.

Güncellendi :

Ekran yükleyiciyi yerleştirip index.htmlReact componentDidMount()yaşam döngüsü yönteminde kaldırarak yaklaşımımın bir örneğini yaptım .

Örnek ve reaksiyon yükleme ekranı .

Bu, yükleme simgesini html dosyanıza (ex için index.html) yerleştirerek yapılabilir, böylece kullanıcılar html dosyası yüklendikten hemen sonra simgeyi görür.

Uygulamanızın yüklenmesi bittiğinde, bir yaşam döngüsü kancasındaki yükleme simgesini kaldırabilirsiniz, genellikle bunu yaparım componentDidMount.

Amaç

Html sayfası oluşturulduğunda, hemen bir döndürücü görüntüleyin (React yüklenirken) ve React hazır olduktan sonra gizleyin.

Değer değiştirici saf HTML / CSS'de (React etki alanının dışında) işlendiğinden, React gösterme / gizleme işlemini doğrudan kontrol etmemeli ve uygulama React'e şeffaf olmalıdır.

Çözüm 1 - The: Boş Sahte Sınıf

Bir DOM kabına tepki <div id="app"></div>verdiğinizden - , bu kaba bir spinner ekleyebilirsiniz ve reaksiyonun yüklenmesi ve görüntülenmesi durumunda, spinner kaybolacaktır.

Tepkime köküne bir DOM öğesi (örneğin bir div) ekleyemezsiniz, çünkü React kapsayıcı içeriği ReactDOM.render()çağrılır değiştirilmez. Oluştursanız bile null, içerik yine de bir yorumla değiştirilir - <!-- react-empty: 1 -->. Bu, ana bileşen monte edilirken yükleyiciyi görüntülemek istiyorsanız, veriler yüklenir, ancak gerçekte hiçbir şey oluşturulmazsa, kabın içine yerleştirilmiş bir yükleyici işaretlemesi ( <div id="app"><div class="loader"></div></div>örneğin) çalışmaz.

Çözüm, spinner sınıfını reaksiyon kabına eklemek ve :emptysözde sınıfı kullanmaktır . Kap içine hiçbir şey girmediği sürece, döndürücü görünür olacaktır (yorumlar sayılmaz). Tepki yorumdan başka bir şey yapar oluşturmaz, yükleyici kaybolacaktır.

örnek 1

Örnekte, nullhazır olana kadar oluşturulan bir bileşeni görebilirsiniz . Kap da yükleyicidir - <div id="app" class="app"></div>ve yükleyicinin sınıfı yalnızca şu durumda çalışır :empty(koddaki yorumlara bakın):

class App extends React.Component {
  state = {
    loading: true
  };

  componentDidMount() {
    // this simulates an async action, after which the component will render the content
    demoAsyncCall().then(() => this.setState({ loading: false }));
  }
  
  render() {
    const { loading } = this.state;
    
    if(loading) { // if your component doesn't have to wait for an async action, remove this block 
      return null; // render null when app is not ready
    }
    
    return (
      <div>I'm the app</div>
    ); 
  }
}

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 2500));
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

.loader:empty {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app" class="loader"></div> <!-- add class loader to container -->

ÖRNEK 2

Bir :emptyseçiciyi göstermek / gizlemek için sözde sınıfı kullanmanın bir varyasyonu , çeviriciyi uygulama kapsayıcısına bir kardeş öğe olarak ayarlamak ve bitişik kardeş birleştiricisi ( +) kullanılarak kap boş olduğu sürece göstermektir :

class App extends React.Component {
  state = {
    loading: true
  };

  componentDidMount() {
    // this simulates an async action, after which the component will render the content
    demoAsyncCall().then(() => this.setState({ loading: false }));
  }
  
  render() {
    const { loading } = this.state;
    
    if(loading) { // if your component doesn't have to wait for async data, remove this block 
      return null; // render null when app is not ready
    }
    
    return (
      <div>I'm the app</div>
    ); 
  }
}

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 2500));
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

#app:not(:empty) + .sk-cube-grid {
  display: none;
}

.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #333;
  float: left;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  animation-delay: 0.2s;
}

@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    transform: scale3D(1, 1, 1);
  }
  35% {
    transform: scale3D(0, 0, 1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app"></div>
<!-- add class loader to container -->

<div class="sk-cube-grid">
  <div class="sk-cube sk-cube1"></div>
  <div class="sk-cube sk-cube2"></div>
  <div class="sk-cube sk-cube3"></div>
  <div class="sk-cube sk-cube4"></div>
  <div class="sk-cube sk-cube5"></div>
  <div class="sk-cube sk-cube6"></div>
  <div class="sk-cube sk-cube7"></div>
  <div class="sk-cube sk-cube8"></div>
  <div class="sk-cube sk-cube9"></div>
</div>

Çözüm 2 - Dönen "işleyicileri" sahne olarak geçirin

, İplikçiler görüntü durumu üzerinde daha fazla ince taneli kontrol iki işlev oluşturmak showSpinnerve hideSpinner, ve sahne ile kök kaba bunları geçmektedir. İşlevler DOM'yi değiştirebilir veya döndürücüyü kontrol etmek için gereken her şeyi yapabilir. Bu şekilde React, "dış dünya" nın farkında değildir ve DOM'u doğrudan kontrol etmesi gerekmez. Test için fonksiyonları kolayca değiştirebilir veya mantığı değiştirmeniz gerekirse ve bunları React ağacındaki diğer bileşenlere aktarabilirsiniz.

örnek 1

const loader = document.querySelector('.loader');

// if you want to show the loader when React loads data again
const showLoader = () => loader.classList.remove('loader--hide');

const hideLoader = () => loader.classList.add('loader--hide');

class App extends React.Component {
  componentDidMount() {
    this.props.hideLoader();
  }
  
  render() {   
    return (
      <div>I'm the app</div>
    ); 
  }
}

// the setTimeout simulates the time it takes react to load, and is not part of the solution
setTimeout(() => 
  // the show/hide functions are passed as props
  ReactDOM.render(
    <App
      hideLoader={hideLoader}
      showLoader={showLoader} 
      />,
    document.getElementById('app')
  )
, 1000);

.loader {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
  transition: opacity 0.3s;
}

.loader--hide {
  opacity: 0;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app"></div>

<div class="loader"></div>

Örnek 2 - kancalar

Bu örnek useEffect, bileşen takıldıktan sonra döndürücüyü gizlemek için kancayı kullanır .

const { useEffect } = React;

const loader = document.querySelector('.loader');

// if you want to show the loader when React loads data again
const showLoader = () => loader.classList.remove('loader--hide');

const hideLoader = () => loader.classList.add('loader--hide');

const App = ({ hideLoader }) => {
  useEffect(hideLoader, []);
  
  return (
    <div>I'm the app</div>
  ); 
}

// the setTimeout simulates the time it takes react to load, and is not part of the solution
setTimeout(() => 
  // the show/hide functions are passed as props
  ReactDOM.render(
    <App
      hideLoader={hideLoader}
      showLoader={showLoader} 
      />,
    document.getElementById('app')
  )
, 1000);

.loader {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
  transition: opacity 0.3s;
}

.loader--hide {
  opacity: 0;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

<div class="loader"></div>

Bunun çözümü:

Oluşturma işlevinizde böyle bir şey yapın:

constructor() {
    this.state = { isLoading: true }
}

componentDidMount() {
    this.setState({isLoading: false})
}

render() {
    return(
        this.state.isLoading ? *showLoadingScreen* : *yourPage()*
    )
}

Yapıcıda isLoading öğesini true ve componentDidMount öğesinde false olarak başlat

Yukarıdaki kullanım örneği için bir bırakma, sıfır yapılandırma ve sıfır bağımlılık kitaplığı arayan biri varsa, pace.js'yi deneyin ( http://github.hubspot.com/pace/docs/welcome/ ).

Otomatik olarak olaylara kancalar (ajax, readyState, geçmiş pushstate, js olay döngüsü vb) ve özelleştirilebilir bir yükleyici gösterir.

Reaksiyon / geçiş projelerimizle iyi çalıştı (tepki yönlendirici, geçiş istekleri kullanarak navigasyon değişikliklerini yönetir) (İlişkili değil; projelerimiz için pace.js kullanmış ve harika çalıştı)

React uygulamanız çok büyük olduğunda, sayfa yüklendikten sonra çalışmaya başlaması gerçekten zaman alır. Uygulamanın React kısmını bağladığınızı varsayalım #app. Genellikle, index.html dosyanızdaki bu öğe boş bir div'dir:

<div id="app"></div>

Bunun yerine, sayfa yüklemesi ile DOM'a ilk React uygulaması oluşturma arasında daha iyi görünmesi için bazı stil ve bir grup görüntü koymanız gerekir:

<div id="app">
  <div class="logo">
    <img src="/my/cool/examplelogo.svg" />
  </div>
  <div class="preload-title">
    Hold on, it's loading!
  </div>
</div>

Sayfa yüklendikten sonra, kullanıcı index.html dosyasının orijinal içeriğini hemen görür. Kısa bir süre sonra React, oluşturulan bileşenlerin tüm hiyerarşisini bu DOM düğümüne bağlamaya hazır olduğunda, kullanıcı gerçek uygulamayı görür.

Not class, değil className. Çünkü bunu html dosyanıza koymanız gerekiyor.

SSR kullanıyorsanız, kullanıcı sayfa yüklendikten hemen sonra gerçek uygulamayı göreceğinden işler daha az karmaşıktır.

Bu kökünReactDOM.render() kontrolünü ele geçirmeden önce olacaktır . Yani Uygulamanız o noktaya kadar monte edilmemiş olacak. <div>

Böylece yükleyicinizi index.htmlkök içindeki dosyaya ekleyebilirsiniz <div>. React devreye girene kadar ekranda görünür.

Sizin için en uygun yükleyici öğesini kullanabilirsiniz ( svgörneğin animasyonla).

Herhangi bir yaşam döngüsü yönteminde kaldırmanıza gerek yoktur. Onun herhangi çocukları yerini alacak tepki kökü <div> render ile <App/>aşağıda GIF görebileceğiniz gibi,.

CodeSandbox örneği

index.html

<head>
  <style>
    .svgLoader {
      animation: spin 0.5s linear infinite;
      margin: auto;
    }
    .divLoader {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="divLoader">
      <svg class="svgLoader" viewBox="0 0 1024 1024" width="10em" height="10em">
        <path fill="lightblue"
          d="PATH FOR THE LOADER ICON"
        />
      </svg>
    </div>
  </div>
</body>

index.js

Kullanılması debuggeriçin sayfayı incelemek için ReactDOM.render()çalışır.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

debugger; // TO INSPECT THE PAGE BEFORE 1ST RENDER

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Günümüzde React 16.8'de kancaları da kullanabiliriz:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [ spinner, setSpinner ] = useState(true);

  // It will be executed before rendering

  useEffect(() => {
    setTimeout(() => setSpinner(false), 1000)
  }, []);

  // [] means like componentDidMount

  return !spinner && <div>Your content</div>;
};

export default App;

ComponentDidMount'ta zaman aşımı ayarı çalışıyor ancak uygulamamda bellek sızıntısı uyarısı aldım. Böyle bir şey deneyin.

constructor(props) {
    super(props)
    this.state = { 
      loading: true,
    }
  }
  componentDidMount() {
    this.timerHandle = setTimeout(() => this.setState({ loading: false }), 3500); 
  }

  componentWillUnmount(){
    if (this.timerHandle) {
      clearTimeout(this.timerHandle);
      this.timerHandle = 0;
    }
  }

Son zamanlarda bu sorunla uğraşmak zorunda kaldım ve benim için iyi çalışan bir çözüm buldum. Ancak, @Ori Drori çözümünü denedim ve maalesef doğru çalışmadı (bazı gecikmeler vardı + kullanımını sevmiyorumsetTimeout fonksiyonun ).

Ben geldi budur:

index.html dosya

İç head etiket - gösterge stilleri:

<style media="screen" type="text/css">

.loading {
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  background-color: black;
  border-radius: 100%;
  height: 6em;
  width: 6em;
}

.container {
  align-items: center;
  background-color: white;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
    transform: scale(1.0);
  }
}

</style>

Şimdibody etiketi:

<div id="spinner" class="container">
  <div class="loading"></div>
</div>

<div id="app"></div>

Ve sonra çok basit bir mantık, app.jsdosya içinde (render fonksiyonunda) gelir:

const spinner = document.getElementById('spinner');

if (spinner && !spinner.hasAttribute('hidden')) {
  spinner.setAttribute('hidden', 'true');
}

Nasıl çalışır?

İlk bileşen (uygulamamda app.jsçoğu durumda da spinneraynı şekilde) doğru bir şekilde monte edildiğinde hidden, ona öznitelik uygulayarak gizleniyor .

Eklemek için daha önemli olan şey, her bileşen montajında ​​döndürücüye nitelik !spinner.hasAttribute('hidden')eklemeyi önler hidden, bu nedenle tüm uygulama yüklendiğinde aslında sadece bir kez eklenir.

Ben kullanıyorum tepki-ilerleme-2 sıfır bağımlılık ve ReactJS inşaat büyük npm paketi.

https://github.com/milworm/react-progress-2

Kurulum:

npm install react-progress-2

Reat-progress-2 / main.css dosyasını projenize ekleyin.

import "node_modules/react-progress-2/main.css";

react-progress-2Üst bileşende bir yere dahil edin ve koyun, örneğin:

import React from "react";
import Progress from "react-progress-2";

var Layout = React.createClass({
render: function() {
    return (
        <div className="layout">
            <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

Şimdi, bir gösterge göstermeniz gerektiğinde, sadece şunu arayın Progress.show():

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

Lütfen showve hideçağrıların istiflendiğini unutmayın, bu nedenle n-ardışık şov çağrılarından sonra, bir göstergeyi gizlemek için n gizle çağrıları yapmanız veya kullanabilirsiniz Progress.hideAll().

Uygulamamda da React kullanıyorum. Axios önleyicilerini kullandığım talepler için, yükleyici ekranı yapmanın harika bir yolu (örnekte gösterildiği gibi tam sayfa), örneğin önleyicilerin içindeki gövdeye (burada bazı özel kodlarla resmi belgelerden kod) sınıf veya kimlik eklemektir:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
     document.body.classList.add('custom-loader');
     return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
       document.body.classList.remove('custom-loader');
       return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  }); 

Ve sonra sadece CSS'de yükleyicinizi sözde öğelerle uygulayın (veya istediğiniz gibi gövdeye değil, farklı öğeye sınıf veya kimlik ekleyin) - arka plan rengini opak veya şeffaf olarak ayarlayabilirsiniz, vb ... Örnek:

custom-loader:before {
    background: #000000;
    content: "";
    position: fixed;
    ...
}

custom-loader:after {
    background: #000000;
    content: "Loading content...";
    position: fixed;
    color: white;
    ...
}

Ortak klasördeki index.html dosya konumunuzu düzenleyin . Görüntünüzü ortak klasördeki index.html ile aynı konuma kopyalayın. Ve sonra index.html içeriğinin <div id="root"> </div>etiket içeren kısmını aşağıdaki html koduyla değiştirin.

<div id="root">  <img src="logo-dark300w.png" alt="Spideren" style="vertical-align: middle; position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px; /* Half the height */
   margin-left: -250px; /* Half the width */" />  </div>

Yükleme işlemi sırasında artık sayfanın ortasında logo görünecektir. Ve sonra birkaç saniye sonra React tarafından değiştirilecektir.

Bu kadar çabaya ihtiyacınız yok, temel bir örnek.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>Title</title>
  <style>
    body {
      margin: 0;
    }

    .loader-container {
      width: 100vw;
      height: 100vh;
      display: flex;
      overflow: hidden;
    }

    .loader {
      margin: auto;
      border: 5px dotted #dadada;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

  </style>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <div class="loader-container">
      <div class="loader"></div>
    </div>
  </div>
</body>

</html>

Örneğinize benzemek için HTMLve ile oynayabilirsiniz CSS.

En önemli soru şudur: 'yükleme' ile ne demek istiyorsun? Eğer monte edilen fiziksel elemandan bahsediyorsanız, buradaki ilk cevaplardan bazıları harika. Bununla birlikte, uygulamanızın yaptığı ilk şey kimlik doğrulamasını kontrol etmekse, gerçekten yüklediğiniz şey, kullanıcının kendilerine yetkili veya yetkisiz bir kullanıcıyı etiketleyen bir çerez geçirip geçirmediği arka uçtan gelen verilerdir.

Bu redux üzerine kuruludur, ancak bunu düz reaksiyon durum modeline kolayca değiştirebilirsiniz.

eylem oluşturucu:

export const getTodos = () => {
  return async dispatch => {
    let res;
    try {
      res = await axios.get('/todos/get');

      dispatch({
        type: AUTH,
        auth: true
      });
      dispatch({
        type: GET_TODOS,
        todos: res.data.todos
      });
    } catch (e) {
    } finally {
      dispatch({
        type: LOADING,
        loading: false
      });
    }
  };
};

Son olarak, kullanıcının yetkilendirilip yetkilendirilmediği anlamına gelir, bir yanıt alındıktan sonra yükleme ekranı kaybolur.

Yükleyen bir bileşen şöyle görünebilir:

class App extends Component {
  renderLayout() {
    const {
      loading,
      auth,
      username,
      error,
      handleSidebarClick,
      handleCloseModal
    } = this.props;
    if (loading) {
      return <Loading />;
    }
    return (
      ...
    );
  }

  ...

  componentDidMount() {
    this.props.getTodos();
  }

...

  render() {
    return this.renderLayout();
 }

}

Durum.yükleme doğruysa, her zaman bir yükleme ekranı göreceğiz. ComponentDidMount'ta, bir yanıt aldığımızda state.loading falsy'yi döndüren bir eylem yaratıcısı olan getTodos işlevimizi çağırıyoruz (bu bir hata olabilir). Bileşen güncellemelerimiz, çağrılarımız yeniden oluşturuluyor ve bu kez if ifadesi nedeniyle yükleme ekranı yok.

Reaksiyon uygulamasının başlatılması ana paket indirmeye dayanır. React uygulaması yalnızca ana paket tarayıcıya indirildikten sonra başlar. Bu, tembel yükleme mimarisi için bile geçerlidir. Ancak gerçek şu ki, herhangi bir demetin adını tam olarak söyleyemeyiz. Çünkü webpack 'npm run build' komutunu çalıştırdığınızda her paketin sonuna bir karma değer ekleyecektir. Tabii ki karma ayarlarını değiştirerek bunu önleyebiliriz, ancak Tarayıcıdaki önbellek veri sorununu ciddi şekilde etkileyecektir. Tarayıcılar aynı paket adı nedeniyle yeni sürümü alamayabilir. . bu durumu ele almak için bir webpack + js + CSS yaklaşımına ihtiyacımız var.

public / index.html dosyasını aşağıdaki gibi değiştirin

<!DOCTYPE html>
<html lang="en" xml:lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=3.0, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <style>
 .percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      border: 1px solid #ccc;
      background-color: #f3f3f3;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      border: 1.1em solid rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .innerpercentage {
      font-size: 20px;
    }
  </style>
  <script>
    function showPercentage(value) {
      document.getElementById('percentage').innerHTML = (value * 100).toFixed() + "%";
    }
    var req = new XMLHttpRequest();
    req.addEventListener("progress", function (event) {
      if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total;
        showPercentage(percentComplete)
        // ...
      } else {
        document.getElementById('percentage').innerHTML = "Loading..";
      }
    }, false);

    // load responseText into a new script element
    req.addEventListener("load", function (event) {
      var e = event.target;
      var s = document.createElement("script");
      s.innerHTML = e.responseText;
      document.documentElement.appendChild(s);
      document.getElementById('parentDiv').style.display = 'none';

    }, false);

    var bundleName = "<%= htmlWebpackPlugin.files.chunks.main.entry %>";
    req.open("GET", bundleName);
    req.send();

  </script>
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

  <title>App Name</title>
  <link href="<%= htmlWebpackPlugin.files.chunks.main.css[0] %>" rel="stylesheet">
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="parentDiv" class="percentage">
    <div id="percentage" class="innerpercentage">loading</div>
  </div>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

Üretim webpack yapılandırmanızda HtmlWebpackPlugin seçeneğini aşağıdaki gibi değiştirin

 new HtmlWebpackPlugin({
          inject: false,
...

Yapılandırma dosyasını almak için 'eject' komutunu kullanmanız gerekebilir. En son webpack, projeyi çıkarmadan HtmlWebpackPlugin'i yapılandırma seçeneğine sahip olabilir.

Ayrıca @Ori Drori'nin cevabını kullandım ve işe koymayı başardım. React kodunuz büyüdükçe, paketler istemci tarayıcısının ilk kez erişimde indirmesi gerekecek şekilde derlenir. Bu, iyi işlemezseniz bir kullanıcı deneyimi sorunu oluşturur.

@Ori yanıtına eklediğim şey, vücut etiketinin onload özniteliğine index.html'deki onload işlevini eklemek ve yürütmekti, böylece her şey göz atma işlemine tamamen yüklendikten sonra yükleyici kaybolur, aşağıdaki snippet'e bakın:

<html>
  <head>
     <style>
       .loader:empty {
          position: absolute;
          top: calc(50% - 4em);
          left: calc(50% - 4em);
          width: 6em;
          height: 6em;
          border: 1.1em solid rgba(0, 0, 0, 0.2);
          border-left: 1.1em solid #000000;
          border-radius: 50%;
          animation: load8 1.1s infinite linear;
        }
        @keyframes load8 {
          0% {
           transform: rotate(0deg);
          }
          100% {
           transform: rotate(360deg);
          }
        }
     </style>
     <script>
       function onLoad() {
         var loader = document.getElementById("cpay_loader");loader.className = "";}
     </script>
   </head>
   <body onload="onLoad();">
     more html here.....
   </body>
</html>

Pace kullanmaya ne dersiniz?

Bu bağlantı adresini burada kullanın.

https://github.hubspot.com/pace/docs/welcome/

1. web sitelerinde istediğiniz stili seçin ve index.css içine yapıştırın

2.go'dan cdnjs Pace Js bağlantısını kopyalayın ve public / index.html'deki komut dosyası etiketlerinize ekleyin

Web yüklerini otomatik olarak algılar ve hızı tarayıcı üst kısmında görüntüler.

Ayrıca css'deki yüksekliği ve animasyonu da değiştirebilirsiniz.