github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/app/(login)/components/LoadingButton.tsx (about)

     1  /***************************************************************
     2   *
     3   * Copyright (C) 2023, Pelican Project, Morgridge Institute for Research
     4   *
     5   * Licensed under the Apache License, Version 2.0 (the "License"); you
     6   * may not use this file except in compliance with the License.  You may
     7   * obtain a copy of the License at
     8   *
     9   *    http://www.apache.org/licenses/LICENSE-2.0
    10   *
    11   * Unless required by applicable law or agreed to in writing, software
    12   * distributed under the License is distributed on an "AS IS" BASIS,
    13   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    14   * See the License for the specific language governing permissions and
    15   * limitations under the License.
    16   *
    17   ***************************************************************/
    18  
    19  "use client"
    20  
    21  import {useState} from "react";
    22  import Button from "@mui/material/Button";
    23  import CircularProgress from "@mui/material/CircularProgress";
    24  
    25  interface LoadingButtonProps extends React.ComponentProps<typeof Button> {
    26      loading: boolean;
    27  }
    28  
    29  export default function LoadingButton({loading, ...props}: LoadingButtonProps) {
    30  
    31      /**
    32       * Prevents the button from being clicked while loading
    33       * @param e
    34       */
    35      function onClick(e: React.MouseEvent<HTMLButtonElement>) {
    36          if(loading){
    37              e.preventDefault()
    38              return
    39          }
    40      }
    41  
    42      return (
    43          <Button
    44              onClick={onClick}
    45              variant="outlined"
    46              {...props}
    47          >
    48              {loading ? <CircularProgress size={"1.5rem"}/> : props.children }
    49          </Button>
    50      )
    51  }