在带有条件的React组件中（用于过滤），在哪里放置Spinner？

Question

我正在使用Giphy API，并且有一个可以搜索gif的有效应用。我的SearchResults组件中有条件，以便用户可以过滤搜索到的结果（例如，额定G，额定PG等）。但是每个gif需要花费不同的时间进行渲染，并且我想为每个项目添加一个微调器（创建了Spinner组件+ gif）或一个微调器，以获得更好的UI / UX。因为我的代码有条件，所以我对如何以及在何处放置微调框感到困惑...欢迎任何帮助或建议！

下面是我的代码：

import React from 'react';

import SearchCategories from './SearchCategories';
import SearchCard from './SearchCard';
// import Spinner from '../layout/Spinner';
import { getFilteredByRating, getSortedByDate } from '../../utils/filters';

const SearchResult = ({
  gifs,
  searchMessage,
  ratingType,
  isDataSorting,
  onSortByDate,
  onSortByRating,
  onClearFilter,
}) => {
  const renderedGifs = gifs.slice();

  return (
    <React.Fragment>
      <h3 className="searchMessage text-center mb-4">{searchMessage}</h3>
      <SearchCategories
        onSortByDate={onSortByDate}
        onSortByRating={onSortByRating}
        onClearFilter={onClearFilter}
      />
      <br />

      {
        // if (gifs === undefined || !gifs.length) {
        //   return <Spinner />
        // } else {
        //   // the code below - the gif results
        // }
      }

      <div className="row justify-content-between">
        {(isDataSorting &&
          getSortedByDate(renderedGifs).map(gif => (
            <div className="col-md-3">
              <div className="m-2 card bg-transparent" key={gif.id}>
                <SearchCard gif={gif} />
              </div>
            </div>
          ))) ||
          (ratingType &&
            (getFilteredByRating(ratingType, renderedGifs).length !== 0 ? (
              getFilteredByRating(ratingType, renderedGifs).map(gif => (
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))
            ) : (
              <p className="searchNotFound">
                Oops! None of the search results match this rating.
              </p>
            ))) ||
          gifs.map(gif => (
            // col-3  col-lg-3
            <div className="col-md-3">
              <div className="m-2 card bg-transparent" key={gif.id}>
                <SearchCard gif={gif} />
              </div>
            </div>
          ))}
      </div>

    </React.Fragment>
  );
};

export default SearchResult;

Answer 1

我完全没有看您的逻辑，但是语法看起来很有趣。看看是否可行...如果没有，我将其删除！

    //...

    return (
      <React.Fragment>
        <h3 className="searchMessage text-center mb-4">{searchMessage}</h3>
        <SearchCategories
          onSortByDate={onSortByDate}
          onSortByRating={onSortByRating}
          onClearFilter={onClearFilter}
        />
        <br />

        {/* look here */}

        {gifs === undefined || !gifs.length ? (
          <Spinner />
        ) : (
          <div className="row justify-content-between">
            {(isDataSorting &&
              getSortedByDate(renderedGifs).map(gif => (
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))) ||
              (ratingType &&
                (getFilteredByRating(ratingType, renderedGifs).length !== 0 ? (
                  getFilteredByRating(ratingType, renderedGifs).map(gif => (
                    <div className="col-md-3">
                      <div className="m-2 card bg-transparent" key={gif.id}>
                        <SearchCard gif={gif} />
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="searchNotFound">
                    Oops! None of the search results match this rating.
                  </p>
                ))) ||
              gifs.map(gif => (
                // col-3  col-lg-3
                <div className="col-md-3">
                  <div className="m-2 card bg-transparent" key={gif.id}>
                    <SearchCard gif={gif} />
                  </div>
                </div>
              ))}
          </div>
        )}
      </React.Fragment>
    );

    //...
    ```