vitess.io/vitess@v0.16.2/web/vtadmin/src/components/placeholders/QueryLoadingPlaceholder.tsx (about)

     1  /**
     2   * Copyright 2022 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import { UseQueryResult } from 'react-query';
    18  import { Spinner } from '../Spinner';
    19  
    20  interface Props {
    21      query?: UseQueryResult;
    22      queries?: UseQueryResult[];
    23  }
    24  
    25  /**
    26   * QueryLoadingPlaceholder is a straightforward component that displays a loading
    27   * message when given one or more queries as returned from useQueryHook.
    28   *
    29   * To simplify its use, this component takes care of hiding itself when all of its
    30   * queries have completed loading.
    31   *
    32   * It's perfectly fine to render it this:
    33   *
    34   *      <QueryLoadingPlaceholder query={query} ... />
    35   *
    36   * ...conversely, it is NOT necessary (although also fine!) to do a check like this:
    37   *
    38   *      {query.isLoading && <QueryLoadingPlaceholder query={query} ... />}
    39   */
    40  export const QueryLoadingPlaceholder: React.FC<Props> = (props) => {
    41      const queries = props.queries || [];
    42      if (props.query) {
    43          queries.push(props.query);
    44      }
    45  
    46      const anyLoading = queries.some((q) => q.isLoading);
    47      if (!anyLoading) {
    48          return null;
    49      }
    50  
    51      const maxFailureCount = Math.max(...queries.map((q) => q.failureCount));
    52  
    53      return (
    54          <div aria-busy="true" className="text-center my-12" role="status">
    55              <Spinner />
    56              <div className="my-4 text-secondary">{maxFailureCount > 2 ? 'Still loading...' : 'Loading...'}</div>
    57          </div>
    58      );
    59  };