כיצד ליצור אנימציה לטעינה ב-React עם React-spinners

הועלה מחדש על ידי אפלטון

עוקב: 0

מבוא

בעת יצירת אפליקציות React שמביאות תוכן ממקורות חיצוניים שלוקח זמן לטעון, זה תמיד רעיון טוב לספק חווית משתמש נעימה על ידי מעורבות משתמשים ושמירה על תשומת הלב שלהם עם מטעין, שכן זה עוזר למשתמשים להבין מה קורה במקום זאת. מאשר להשאיר להם השערות.

במדריך זה, נלמד כיצד להציג אנימציית מטעין בעת טעינת אפליקציה ואחזור תוכן ממקורות חיצוניים, על ידי שימוש ב react-spinners סִפְרִיָה.

לשם כך – נבנה אפליקציה קטנה שמביאה הצעות מחיר, עם מסך טעינה בזמן שליפת הצעת מחיר:

אם תרצה ללמוד עוד על יצירת ספינרים מאפס, קרא את שלנו "כיצד ליצור אנימציית טעינה בתגובה מאפס"!

יצירת אפליקציית React לדוגמה

נתחיל בהסתכלות על סימון ה-React שלנו. בעיקרון, יש לנו שניים <div> אלמנטים ב- הורה <div> (למען הפשטות) - אחד הוא ה loader-container והשני הוא ה main-content:

import React from 'react'; const App = () => { return ( <div className="container"> <div className="loader-container"> <div className="spinner"></div> </div> <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote"> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> - <span className="author">Rollo May</span> </div> </div> </div> );
}; export default App;

עד כה, יצרנו רק א <div> עבור המעמיס שלנו. כעת, בואו נראה כיצד נוכל להוסיף אותו ולהפעיל אותו כאשר חלק מהתוכן נטען.

הערה: אתה יכול לבדוק המאגר הזה והצליב את הקוד במידת הצורך בזמן קריאת המדריך הזה.

שימוש בספינרים של React באפליקציה שלנו

react-spinner הוא אוסף של ספינרים רבים שבהם אנו יכולים להשתמש ביישומי React שלנו. כדי להשתמש ב-React spinner, עלינו להתקין תחילה את הספרייה בספריית הפרויקט שלנו על ידי הפעלת כל אחת מהפקודות הבאות:

$ npm install --save react-spinners
// Or
$ yarn add react-spinners

ברגע שזה נעשה, כעת נוכל לייבא את הטוען המסוים שבו נרצה להשתמש (במקרה זה, א ClipLoader) והגדר קצת סטיילינג כמו גודל וצבע:

import React, { useState, useEffect } from 'react';
import ClipLoader from 'react-spinners/ClipLoader'; const App = () => { const [loadingInProgress, setLoading] = useState(false); <!-- ... --> return ( <div className="container"> {loadingInProgress ? ( <div className="loader-container"> <ClipLoader color={'#fff'} size={150} /> </div> ) : ( <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote" onClick={getRandomQuote}> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote">{quote.content}</blockquote>-{' '} <span className="author">{quote.author}</span> </div> </div> )} </div> );
}; export default App;

אל האני react-spinner לספרייה יש הרבה תכונות שימושיות, למשל, אנחנו יכולים להשתמש בה כדי לטפל בטעינה מבלי להשתמש באופרטורים שלישיים:

<ClipLoader color={'#fff'} loading={loadingInProgress} size={150} />

במקום להשתמש באופרטור טריני כדי להציג את התוכן על סמך הערך של ה- loadingInProgress משתנה, פשוט השתמשנו loading={loadingInProgress} במקום.

אנחנו יכולים גם לשנות את ה-CSS המשמש לשליטה ב- spinner-icon באמצעות override תְכוּנָה:

import { useState } from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader"; const override = css` display: block; margin: 0 auto; border-color: red;
`; function App() { let [loadingInProgress, setLoading] = useState(true); return ( <div className="container"> <ClipLoader color={'#fff'} loading={loadingInProgress} css={override} size={150} /> // ... </div> );
} export default App;