प्रतिक्रिया - DOM रेंडर करते समय लोडिंग स्क्रीन प्रदर्शित करें?


150

यह Google Adsense एप्लीकेशन पेज से एक उदाहरण है। मुख्य पृष्ठ के बाद दिखाई जाने वाली लोडिंग स्क्रीन के बाद दिखाई गई।

यहां छवि विवरण दर्ज करें

मुझे नहीं पता कि रिएक्ट के साथ एक ही काम कैसे करना है क्योंकि अगर मैं रिएक्ट घटक द्वारा प्रदान की गई लोडिंग स्क्रीन बनाता हूं, तो यह पेज लोड होने के दौरान प्रदर्शित नहीं होता है क्योंकि इसके लिए डोम से पहले इंतजार करना पड़ता है।

अपडेट किया गया :

मैंने स्क्रीन लोडर लगाकर अपने दृष्टिकोण का एक उदाहरण बनाया index.htmlऔर इसे रिएक्ट componentDidMount()जीवन चक्र विधि में हटा दिया ।

उदाहरण और प्रतिक्रिया-लोडिंग-स्क्रीन


जो आप सादे js में दिखाना चाहते हैं, उसे दिखाएं, फिर इसे छिपाएँ या DOM से निकालें जब रिएक्शन बढ़ गया हो। आपको बस इसे प्रतिक्रिया कोड से छिपाने की आवश्यकता है।
फुरकानो

यह बस अद्भुत है! धन्यवाद।
अरमान करीमी

जवाबों:


100

यह आपके html फ़ाइल में लोडिंग आइकन (पूर्व के लिए index.html) रखकर किया जा सकता है, ताकि उपयोगकर्ताओं को HTML फ़ाइल लोड होने के तुरंत बाद आइकन दिखाई दे।

जब आपका ऐप लोड करना समाप्त कर देता है, तो आप उस लोडिंग आइकन को एक जीवनचक्र हुक में निकाल सकते हैं, मैं आमतौर पर ऐसा करता हूं componentDidMount


11
यदि आप रूट आइकन को उस आइकन के मूल नोड पर माउंट करते हैं, तो इसे मैन्युअल रूप से निकालने की कोई आवश्यकता नहीं है। रिएक्ट माउंट नोड के बच्चों को साफ करेगा और इसके बजाय अपने स्वयं के नव प्रदान किए गए डीओएम डाल देगा।
5

6
मैं आइकन को रिएक्ट ऐप के रूट नोड के अंदर नहीं डालता, यह सिर्फ मेरे लिए सही नहीं लगता है
kkkkkkk

172

लक्ष्य

जब html पेज रेंडर किया जाता है, तो तुरंत एक स्पिनर प्रदर्शित करें (जब रिएक्ट लोड होता है), और रिएक्ट तैयार होने के बाद इसे छिपाएं।

चूंकि स्पिनर शुद्ध एचटीएमएल / सीएसएस (रिएक्ट डोमेन के बाहर) में प्रदान किया जाता है, रिएक्ट को सीधे दिखाने / छिपाने की प्रक्रिया को नियंत्रित नहीं करना चाहिए, और कार्यान्वयन को रिएक्ट के लिए पारदर्शी होना चाहिए।

समाधान 1 -: खाली छद्म वर्ग

चूँकि आप DOM कंटेनर में प्रतिक्रिया प्रदान करते हैं - <div id="app"></div>, आप उस कंटेनर में एक स्पिनर जोड़ सकते हैं, और जब प्रतिक्रिया लोड और रेंडर करेगी, तो स्पिनर गायब हो जाएगा।

प्रतिक्रिया रूट के अंदर आप DOM तत्व (उदाहरण के लिए div) नहीं जोड़ सकते हैं, क्योंकि प्रतिक्रिया के रूप में जैसे ही कंटेनर की सामग्री को प्रतिस्थापित किया जाएगा ReactDOM.render()। यहां तक ​​कि अगर आप प्रस्तुत करते हैं null, तब भी सामग्री को एक टिप्पणी द्वारा बदल दिया जाएगा - <!-- react-empty: 1 -->। इसका मतलब यह है कि यदि आप मुख्य घटक की गणना करते समय लोडर प्रदर्शित करना चाहते हैं, तो डेटा लोड हो रहा है, लेकिन वास्तव में कुछ भी प्रदान नहीं किया गया है, कंटेनर के अंदर रखा गया लोडर मार्कअप ( <div id="app"><div class="loader"></div></div>उदाहरण के लिए) काम नहीं करेगा।

एक वैकल्पिक हल स्पिनर वर्ग को प्रतिक्रिया कंटेनर में जोड़ना है, और :emptyछद्म वर्ग का उपयोग करना है । स्पिनर दिखाई देगा, जब तक कि कुछ भी कंटेनर में प्रदान नहीं किया जाता है (टिप्पणियां गिनती नहीं करती हैं)। जैसे ही प्रतिक्रिया टिप्पणी के अलावा कुछ और प्रदान करती है, लोडर गायब हो जाएगा।

उदाहरण 1

उदाहरण में आप एक घटक देख सकते हैं जो nullतैयार होने तक प्रस्तुत करता है । कंटेनर लोडर के रूप में अच्छी तरह से है - <div id="app" class="app"></div>और लोडर का वर्ग केवल तभी काम करेगा जब यह :empty(कोड में टिप्पणियां देखें):

उदाहरण 2

:emptyचयनकर्ता को दिखाने / छिपाने के लिए छद्म वर्ग का उपयोग करने पर एक भिन्नता , स्पिनर को ऐप कंटेनर में एक सिबलिंग तत्व के रूप में सेट कर रही है, और जब तक कंटेनर आसन्न सिबलिंग कॉम्बीनेटर ( +) का उपयोग करके खाली नहीं होता है


समाधान 2 - पास स्पिनर "हैंडलर" को सहारा के रूप में

स्पिनरों के प्रदर्शन की स्थिति पर अधिक बारीक नियंत्रण रखने के लिए, दो फ़ंक्शन बनाएं showSpinnerऔर hideSpinner, उन्हें प्रॉपर के माध्यम से रूट कंटेनर में पास करें। फ़ंक्शंस डोम को हेरफेर कर सकते हैं, या स्पिनर को नियंत्रित करने के लिए जो भी आवश्यक हो, कर सकते हैं। इस तरह, रिएक्ट को "बाहरी दुनिया" के बारे में पता नहीं है, न ही सीधे डोम को नियंत्रित करने की आवश्यकता है। आप परीक्षण के लिए कार्यों को आसानी से बदल सकते हैं, या यदि आपको तर्क को बदलने की आवश्यकता है, और आप उन्हें रिएक्ट ट्री में अन्य घटकों को पास कर सकते हैं।

उदाहरण 1

उदाहरण 2 - हुक

यह उदाहरण useEffectघटक माउंट के बाद स्पिनर को छिपाने के लिए हुक का उपयोग करता है ।


क्या आप स्पष्ट कर सकते हैं कि अंतिम 2 कोड अनुभाग कहाँ होने चाहिए? पहली प्रतिक्रिया घटक के लिए जावास्क्रिप्ट src फ़ाइल में स्पष्ट रूप से है, तीसरे मैं अनुमान लगा रहा हूँ HTML टेम्पलेट में कहा जाता है कि js फ़ाइल द्वारा प्रस्तुत किया जाना है, लेकिन दूसरा कहां जाता है?
लेव्रेनिन्जानेर

1
2 सीएसएस है। मैंने वैश्विक CSS का उपयोग किया है, लेकिन आप JS में CSS मॉड्यूल या CSS का उपयोग कर सकते हैं। तीसरा HTML फ़ाइल है, जिसमें ज़रूरत पड़ने पर स्पिनर मार्कअप शामिल हो सकता है (दूसरा उदाहरण)।
ओरियो ड्रोरी

जब प्रदर्शन को ध्यान में रखा जाता है तो यह टाइमआउट अच्छा नहीं होता है।
23

4
@dryleaf - सेटटाइमआउट समाधान का हिस्सा नहीं है। यह सामग्री को प्रस्तुत करने से पहले एक async कार्रवाई की प्रतीक्षा कर रहा है।
ओरिएं ड्रोरी

मैं इसी तरह के दृष्टिकोण का उपयोग करता हूं। मुझे वेबपैक में कुछ भी नहीं मिल रहा है जो मुझे लोडर के लिए आवश्यक सीएसएस फ़ाइल के लिए कैश का भंडाफोड़ करने में मदद कर सकता है। क्या आप मदद कर सकते हैं?
हमजा-जुत्त

40

इसके लिए समाधान यह है:

अपने रेंडर फंक्शन में ऐसा कुछ करें:

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

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

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

आरंभक को निर्माणकर्ता में सच मानें और कंपोनेंटडिमाउंट पर गलत है


जब हमने चाइल्ड कंपोनेंट्स में डेटा लोड करने के लिए अजाक्स मेथड बुलाया है। ComponentsDidMount को चाइल्ड कंपोनेंट डेटा पॉप्युलेट करने से पहले बुलाया जाता है। हम इस तरह के मुद्दे को कैसे दूर करेंगे?
दशहरा

2
बढ़ते जीवन काल के लिए यह ठीक है, क्या आप अपडेशन जीवन चक्र के लिए कुछ जोड़ना चाहेंगे?
ज़ाकिर

क्या मुझे इसे सभी पृष्ठों में या सिर्फ ऐप प्रविष्टि में करना है
पेड्रो जेआर

16

यदि कोई भी उपर्युक्त उपयोग के मामले के लिए ड्रॉप-इन, शून्य-कॉन्फ़िगरेशन और शून्य-निर्भरता लाइब्रेरी की तलाश कर रहा है, तो speed.js ( http://github.hubspot.com/pace/docs/welcome/ ) आज़माएं ।

यह स्वचालित रूप से ईवेंट (अजाक्स, रेडीस्टेट, हिस्ट्री पुशस्टेट, जेएस इवेंट लूप आदि) को हुक करता है और कस्टम लोडर को दिखाता है।

हमारी प्रतिक्रिया / रिले परियोजनाओं के साथ अच्छी तरह से काम किया (प्रतिक्रिया-राउटर, रिले अनुरोधों का उपयोग करके नेविगेशन परिवर्तन संभालता है) (affliated नहीं; हमारी परियोजनाओं के लिए गति। Js का उपयोग किया था और यह बहुत अच्छा काम किया)


अरे! क्या आप मुझे बता सकते हैं कि प्रतिक्रिया के साथ इसका उपयोग कैसे करें?
uneet7

बस स्क्रिप्ट संलग्न करें public/index.htmlऔर एक शैली चुनें। यह मृत सरल, अद्भुत प्लगइन है। धन्यवाद।
PJ3

मुझे इस उत्तर के बिना गति नहीं मिली। इसे शामिल करना बहुत आसान था, और थोड़ा सीएसएस मैजिक और कुछ ईवेंट अटैचमेंट्स के साथ मैं संक्रमण के दौरान ऐप को ब्लॉक / अक्षम करने और स्पिनर को अनुकूलित करने में सक्षम था।
उल्टास्पर्शी

12

जब आपका रिएक्ट ऐप बड़े पैमाने पर होता है, तो पेज लोड होने के बाद उठने और चलने में वास्तव में समय लगता है। कहते हैं, आप ऐप के अपने रिएक्ट वाले हिस्से को माउंट करते हैं #app। आमतौर पर, आपके index.html में यह तत्व केवल एक खाली div है:

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

इसके बजाय आप क्या कर सकते हैं कुछ स्टाइल और वहाँ छवियों का एक गुच्छा रखा है ताकि यह पृष्ठ लोड और प्रारंभिक प्रतिक्रिया एप्लिकेशन के बीच बेहतर दिख सके:

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

पृष्ठ लोड होने के बाद, उपयोगकर्ता तुरंत index.html की मूल सामग्री को देखेगा। कुछ ही समय बाद, जब रिएक्ट इस DOM नोड में रेंडर किए गए घटकों के पूरे पदानुक्रम को माउंट करने के लिए तैयार है, तो उपयोगकर्ता वास्तविक ऐप देखेंगे।

ध्यान दें class, नहीं className। ऐसा इसलिए है क्योंकि आपको इसे अपने html फ़ाइल में डालने की आवश्यकता है।


यदि आप SSR का उपयोग करते हैं, तो चीजें कम जटिल हैं क्योंकि उपयोगकर्ता वास्तव में पेज लोड होने के बाद वास्तविक ऐप को देखेगा।


यह काम करता है मेरे पास दो जगह हैं जहां लोडिंग होती है। एक बड़े पैमाने पर app है। और इसके बाद की तैयारी (विभिन्न घटकों की माउंटिंग है।) तो मुझे एक चमकता हुआ कदम मिलता है क्योंकि app.render लेता है और एनीमेशन रीसेट हो जाता है ( वास्तव में बदल दिया जाता है ।) क्या उस फ्लैश से बचने का कोई तरीका होगा? क्या प्रतिक्रिया एक डोम से एक की तुलना करेगी? लेकिन जो मैं समझता हूं कि रिएक्ट टैग में सभी प्रकार के निजी डेटा जोड़ता है ...
एलेक्सिस विलके

12

इससे पहले ReactDOM.render()कि रूट का नियंत्रण हो जाए <div>। यानी आपके ऐप को उस बिंदु तक नहीं लगाया जाएगा।

तो आप index.htmlरूट के अंदर अपनी फाइल में अपना लोडर जोड़ सकते हैं <div>। और वह तब तक स्क्रीन पर दिखाई देगा, जब तक रिएक्ट खत्म नहीं हो जाता।

आप जो भी लोडर तत्व आपके लिए सबसे अच्छा काम करते हैं ( svgउदाहरण के लिए एनीमेशन के साथ) का उपयोग कर सकते हैं ।

आप इसे किसी भी जीवन चक्र विधि पर हटाने की जरूरत नहीं है। रिएक्ट अपने मूल के किसी भी बच्चे को <div>आपके रेंडर के साथ बदल देगा <App/>, जैसा कि हम नीचे GIF में देख सकते हैं।

CodeSandbox पर उदाहरण

यहां छवि विवरण दर्ज करें

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

रन debuggerसे पहले पृष्ठ का निरीक्षण करने के लिए उपयोग करना ReactDOM.render()

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);

एक सुंदर और सुरुचिपूर्ण समाधान
Gal Margalit

1
मुझे खुशी है कि यह मदद करता है!
cbdeveloper

9

आजकल हम रिएक्ट 16.8 में भी हुक का उपयोग कर सकते हैं:

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;

5

घटक में टाइमआउट सेट करना काम करता है, लेकिन मेरे आवेदन में मुझे स्मृति रिसाव की चेतावनी मिली। कुछ इस तरह की कोशिश करो।

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;
    }
  }

4

मुझे हाल ही में उस समस्या से निपटना पड़ा और एक समाधान के साथ आया, जो मेरे लिए ठीक काम करता है। हालाँकि, मैंने @Ori Drori सॉल्यूशन को ऊपर से आज़माया है और दुर्भाग्य से यह सही नहीं था (कुछ देरी + मुझे setTimeoutवहाँ फंक्शन का उपयोग पसंद नहीं है )।

मैंने ये ढूंढ निकाला:

index.html फ़ाइल

अंदर head टैग - संकेतक के लिए शैलियाँ:

<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>

अबbody टैग:

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

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

और फिर एक बहुत ही सरल तर्क आता है, app.jsफ़ाइल के अंदर (रेंडर फ़ंक्शन में):

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

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

यह कैसे काम करता है?

जब पहला घटक (मेरे ऐप में यह app.jsज्यादातर मामलों में अस्वस्थ है) सही ढंग से माउंट करता है, तो इसे spinnerलागू करने की hiddenविशेषता के साथ छिपाया जा रहा है।

जोड़ने के लिए और अधिक महत्वपूर्ण है - !spinner.hasAttribute('hidden')हालत hiddenहर घटक माउंट के साथ स्पिनर में विशेषता जोड़ने से रोकता है , इसलिए वास्तव में इसे केवल एक बार जोड़ा जाएगा, जब संपूर्ण ऐप लोड हो जाएगा।


4

मैं प्रतिक्रिया-प्रगति -2 एनपीएम पैकेज का उपयोग कर रहा हूं , जो शून्य-निर्भरता है और रिएक्टजेएस में महान काम करता है।

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

स्थापना:

npm install react-progress-2

अपनी परियोजना के लिए प्रतिक्रिया-प्रगति -2 / main.css शामिल करें।

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

react-progress-2उदाहरण के लिए इसे शीर्ष-घटक में शामिल करें और रखें:

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>
        );
    }
});

अब, जब भी आपको एक संकेतक दिखाने की आवश्यकता होती है Progress.show(), उदाहरण के लिए , केवल कॉल करें :

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

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

कृपया ध्यान दें, कि कॉल showऔर hideकॉल स्टैक्ड हैं, इसलिए एन-लगातार शो कॉल के बाद, आपको एक संकेतक को छिपाने के लिए एन हाइड कॉल करने की आवश्यकता है या आप उपयोग कर सकते हैं Progress.hideAll()


4

मैं अपने ऐप में रिएक्ट का भी इस्तेमाल कर रहा हूं। उन अनुरोधों के लिए, जो मैं axios इंटरसेप्टर का उपयोग कर रहा हूं, इसलिए लोडर स्क्रीन बनाने के लिए शानदार तरीका (फुलपेज जैसा कि आपने एक उदाहरण दिखाया) इंटरसेप्टर्स के अंदर उदाहरण के लिए बॉडी या आईडी जोड़ना है (यहां कुछ कस्टम कोड के साथ आधिकारिक दस्तावेज से कोड):

// 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);
  }); 

और फिर सीएसएस में अपने लोडर को छद्म तत्वों के साथ लागू करें (या अलग-अलग तत्व में वर्ग या आईडी जोड़ें, न कि शरीर जैसा आप चाहें) - आप पृष्ठभूमि के रंग को अपारदर्शी या पारदर्शी, आदि ... उदाहरण के लिए सेट कर सकते हैं:

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

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

3

सार्वजनिक फ़ोल्डर में अपनी index.html फ़ाइल स्थान संपादित करें । अपनी छवि को सार्वजनिक फ़ोल्डर में index.html जैसे स्थान पर कॉपी करें । और फिर <div id="root"> </div>नीचे दिए गए HTML कोड में index.html की सामग्री के भाग को टैग से प्रतिस्थापित करें ।

<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>

अब लोडिंग प्रक्रिया के दौरान पेज के बीच में लोगो दिखाई देगा। और फिर React द्वारा कुछ सेकंड के बाद बदल दिया जाएगा।


2

आपको उस प्रयास की आवश्यकता नहीं है, यहाँ एक मूल उदाहरण है।

<!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>

आप इसके साथ खेल सकते हैं HTMLऔर CSSइसे अपने उदाहरण की तरह बना सकते हैं।


1

सबसे महत्वपूर्ण सवाल यह है: 'लोडिंग' से आपका क्या तात्पर्य है? यदि आप भौतिक तत्व को माउंट किए जाने के बारे में बात कर रहे हैं, तो यहां कुछ पहले उत्तर महान हैं। हालाँकि, यदि आपका पहला ऐप प्रमाणीकरण के लिए जाँच करता है, तो आप जो वास्तव में लोड कर रहे हैं वह बैकएंड से डेटा है कि क्या उपयोगकर्ता ने एक कुकी पारित की है जो उन्हें अधिकृत या अनधिकृत उपयोगकर्ता लेबल करता है।

यह रिडक्स के आसपास आधारित है, लेकिन आप इसे आसानी से राज्य प्रतिक्रिया के सादे मॉडल में बदल सकते हैं।

एक्शन क्रिएटर:

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
      });
    }
  };
};

अंत में भाग का मतलब है कि उपयोगकर्ता को अंकित किया गया है या नहीं, एक प्रतिक्रिया प्राप्त होने के बाद लोडिंग स्क्रीन चली जाती है।

यहाँ एक घटक है जो इसे लोड करता है वह जैसा दिख सकता है:

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();
 }

}

अगर state.loading सत्य है, तो हम हमेशा एक लोडिंग स्क्रीन देखेंगे। कॉम्पोनेन्टमाउंट पर, हम अपने गेटटोड फंक्शन को कहते हैं, जो एक एक्शन क्रिएटर है जो स्टेट को लोड करता है। जब हमें प्रतिक्रिया मिलती है (जो कि एक त्रुटि हो सकती है)। हमारे घटक अपडेट, कॉल फिर से प्रस्तुत करते हैं, और इस बार अगर कोई वक्तव्य नहीं है तो लोडिंग स्क्रीन नहीं है।


1

प्रतिक्रिया ऐप की शुरुआत मुख्य बंडल डाउनलोड पर आधारित है। प्रतिक्रिया ऐप केवल ब्राउज़र में मुख्य बंडल डाउनलोड होने के बाद शुरू होता है। यह आलसी लोडिंग आर्किटेक्चर के मामले में भी सच है। लेकिन तथ्य यह है कि हम किसी भी बंडलों के नाम का उल्लेख नहीं कर सकते हैं। क्योंकि webpack उस समय प्रत्येक बंडल के अंत में हैश मान जोड़ देगा जब आप 'npm run build' कमांड चलाते हैं। बेशक हम हैश सेटिंग्स को बदलकर इससे बच सकते हैं, लेकिन यह ब्राउज़र में कैश डेटा समस्या को गंभीरता से प्रभावित करेगा। उसी बंडल नाम के कारण ब्राउज़र नया संस्करण नहीं ले सकता है। । हमें इस स्थिति को संभालने के लिए एक वेबपैक + js + CSS दृष्टिकोण की आवश्यकता है।

नीचे के रूप में जनता / index.html बदलें

<!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>

अपने उत्पादन वेबपैक विन्यास में HtmlWebpackPlugin विकल्प को नीचे बदलें

 new HtmlWebpackPlugin({
          inject: false,
...

कॉन्फ़िगरेशन फ़ाइल प्राप्त करने के लिए आपको 'इजेक्ट' कमांड का उपयोग करना पड़ सकता है। नवीनतम वेबपैक में परियोजना को बेदखल किए बिना HtmlWebpackPlugin को कॉन्फ़िगर करने का विकल्प हो सकता है। यहां छवि विवरण दर्ज करें


1

मैंने @ ओरी ड्रोरी के जवाब का भी इस्तेमाल किया और इसे काम में लाने में कामयाब रहा। जैसे-जैसे आपका रिएक्ट कोड बढ़ता है, वैसे-वैसे बंडल संकलित होगा कि क्लाइंट ब्राउज़र को पहली बार एक्सेस पर डाउनलोड करना होगा। यदि आप इसे अच्छी तरह से हैंडल नहीं करते हैं तो यह एक उपयोगकर्ता अनुभव समस्या को लागू करता है।

मैंने बॉडी टैग के ऑनलोड विशेषता पर index.html में onload फ़ंक्शन को जोड़ने और निष्पादित करने के लिए @Ori उत्तर में क्या जोड़ा था, ताकि सब कुछ पूरी तरह से ब्राउज़ में लोड होने के बाद लोडर गायब हो जाए, नीचे स्निपेट देखें:

<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>

1

पेस के उपयोग के बारे में क्या

इस लिंक पते का उपयोग यहां करें।

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

1. अपनी वेबसाइट पर अपनी इच्छित शैली चुनें और index.css में चिपकाएँ

2.go to cdnjs पेस जेएस के लिंक को कॉपी करें और सार्वजनिक / index.html में अपने स्क्रिप्ट टैग में जोड़ें

3. यह स्वचालित रूप से वेब लोड का पता लगाता है और ब्राउज़र टॉप पर गति प्रदर्शित करता है।

आप सीएसएस में भी ऊंचाई और एनीमेशन को संशोधित कर सकते हैं।


बहुत बढ़िया और कुछ ही समय में एकीकृत किया जा सकता है।
उज़ुमाकील
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.