add gui button

libs/remix-ui/git/src/components/buttons/sourcecontrolbuttons.tsx

@@ -6,6 +6,7 @@ import { FormattedMessage } from "react-intl"
 import { gitActionsContext } from "../../state/context"
 import { branch, remote } from "../../types"
 import { gitPluginContext } from "../gitui"
+import GitUIButton from "./gituibutton"
 
 interface SourceControlButtonsProps {
   remote?: remote,
@@ -88,16 +89,16 @@ export const SourceControlButtons = (props: SourceControlButtonsProps) => {
 
   return (<span className='d-flex justify-content-end align-items-center'>
     <CustomTooltip tooltipText={<FormattedMessage id="git.pull" />}>
-      <>{commitsBehind.length}<button onClick={pull} className='btn btn-sm'><FontAwesomeIcon icon={faArrowDown} className="" /></button></>
+      <>{commitsBehind.length}<GitUIButton onClick={pull} className='btn btn-sm'><FontAwesomeIcon icon={faArrowDown} className="" /></GitUIButton></>
     </CustomTooltip>
     <CustomTooltip tooltipText={<FormattedMessage id="git.push" />}>
-      <>{commitsAhead.length}<button onClick={push} className='btn btn-sm'><FontAwesomeIcon icon={faArrowUp} className="" /></button></>
+      <>{commitsAhead.length}<GitUIButton onClick={push} className='btn btn-sm'><FontAwesomeIcon icon={faArrowUp} className="" /></GitUIButton></>
     </CustomTooltip>
     <CustomTooltip tooltipText={<FormattedMessage id="git.sync" />}>
-      <button onClick={sync} className='btn btn-sm'><FontAwesomeIcon icon={faArrowsUpDown} className="" /></button>
+      <GitUIButton onClick={sync} className='btn btn-sm'><FontAwesomeIcon icon={faArrowsUpDown} className="" /></GitUIButton>
     </CustomTooltip>
     <CustomTooltip tooltipText={<FormattedMessage id="git.refresh" />}>
-      <button onClick={async () => { }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowRotateRight} className="" /></button>
+      <GitUIButton onClick={async () => { }} className='btn btn-sm'><FontAwesomeIcon icon={faArrowRotateRight} className="" /></GitUIButton>
     </CustomTooltip>
   </span>)
 }

libs/remix-ui/git/src/components/navigation/branches.tsx

@@ -2,6 +2,7 @@ import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, {  } from "react";
 import { gitActionsContext, pluginActionsContext } from "../../state/context";
+import LoaderIndicator from "./loaderindicator";
 
 export const BranchesNavigation = ({ eventKey, activePanel, callback  }) => {
     const pluginactions = React.useContext(pluginActionsContext)
@@ -23,6 +24,7 @@ export const BranchesNavigation = ({ eventKey, activePanel, callback  }) => {
                         activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
                     }
                     <label className="pl-1 nav form-check-label">BRANCHES</label>
+                    <LoaderIndicator></LoaderIndicator>
                 </span>
             </div>
         </>

libs/remix-ui/git/src/components/navigation/clone.tsx

@@ -1,6 +1,7 @@
 import { faCaretUp, faCaretDown, faArrowUp, faArrowDown, faArrowRotateRight, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useContext, useEffect } from "react";
+import LoaderIndicator from "./loaderindicator";
 
 export const CloneNavigation = ({ eventKey, activePanel, callback  }) => {
 
@@ -20,6 +21,7 @@ export const CloneNavigation = ({ eventKey, activePanel, callback  }) => {
                         activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
                     }
                     <label className="pl-1 nav form-check-label">CLONE</label>
+                    <LoaderIndicator></LoaderIndicator>
                 </span>
             </div>
         </>

libs/remix-ui/git/src/components/navigation/commands.tsx

@@ -1,8 +1,10 @@
-import { faCaretUp, faCaretDown, faArrowUp, faArrowDown, faArrowRotateRight, faCaretRight, faCircleCheck, faArrowsUpDown } from "@fortawesome/free-solid-svg-icons";
+import { faCaretUp, faCaretDown, faArrowUp, faArrowDown, faArrowRotateRight, faCaretRight, faCircleCheck, faArrowsUpDown, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useContext, useEffect } from "react";
 import { pluginActionsContext } from "../../state/context";
+import GitUIButton from "../buttons/gituibutton";
 import { SourceControlButtons } from "../buttons/sourcecontrolbuttons";
+import LoaderIndicator from "./loaderindicator";
 
 export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {
     const pluginactions = React.useContext(pluginActionsContext)
@@ -24,6 +26,8 @@ export const CommandsNavigation = ({ eventKey, activePanel, callback }) => {
                         activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
                     }
                     <label className="pl-1 nav form-check-label">COMMANDS</label>
+                    <LoaderIndicator></LoaderIndicator>
+
                 </span>
             </div>
         </>

libs/remix-ui/git/src/components/navigation/commits.tsx

@@ -7,6 +7,7 @@ import { pluginActionsContext } from "../../state/context";
 import { branch, remote } from "../../types";
 import { SourceControlButtons } from "../buttons/sourcecontrolbuttons";
 import { gitPluginContext } from "../gitui";
+import LoaderIndicator from "./loaderindicator";
 
 export interface CommitsNavigationProps {
     title: string,
@@ -42,7 +43,7 @@ export const CommitsNavigation = ({ eventKey, activePanel, callback, title, bran
                         activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
                     }
                     <label className="pl-1 nav form-check-label">{title}</label>
-
+                    <LoaderIndicator></LoaderIndicator>
 
                 </span>
 

libs/remix-ui/git/src/components/navigation/loaderindicator.tsx

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react'
+import { gitPluginContext } from '../gitui'
+
+interface LoaderIndicatorProps {
+  type?: string;
+  isLoadingCondition?: boolean; // Optional additional disabling condition
+}
+
+// This component extends a button, disabling it when loading is true
+const LoaderIndicator = ({ type, isLoadingCondition }: LoaderIndicatorProps) => {
+  const { loading } = React.useContext(gitPluginContext)
+
+  const isLoading = loading || isLoadingCondition
+  if (!isLoading) return null
+  return (
+    <i style={{ fontSize: 'x-small' }} className="ml-1 fas fa-spinner fa-spin fa-4x"></i>
+  );
+};
+
+export default LoaderIndicator;

libs/remix-ui/git/src/components/navigation/remotes.tsx

@@ -2,6 +2,7 @@ import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, {  } from "react";
 import { gitActionsContext, pluginActionsContext } from "../../state/context";
+import LoaderIndicator from "./loaderindicator";
 
 export const RemotesNavigation = ({ eventKey, activePanel, callback  }) => {
     const pluginactions = React.useContext(pluginActionsContext)
@@ -23,6 +24,7 @@ export const RemotesNavigation = ({ eventKey, activePanel, callback  }) => {
                         activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
                     }
                     <label className="pl-1 nav form-check-label">REMOTES</label>
+                    <LoaderIndicator></LoaderIndicator>
                 </span>
             </div>
         </>

libs/remix-ui/git/src/components/navigation/remotesdetails.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useContext, useEffect } from "react";
 import { gitActionsContext } from "../../state/context";
 import { branch, remote } from "../../types";
+import GitUIButton from "../buttons/gituibutton";
 import { gitPluginContext } from "../gitui";
 
 interface RemotesDetailsNavigationProps {
@@ -47,15 +48,15 @@ export const RemotesDetailsNavigation = (props: RemotesDetailsNavigationProps) =
 
         </div>
         {context.defaultRemote && context.defaultRemote?.url === remote.url ?
-          <FontAwesomeIcon className='ml-auto mr-1 pointer text-success' icon={faCheck} ></FontAwesomeIcon>
+          <GitUIButton className="btn btn-sm" onClick={()=>{}} disabledCondition={true}><FontAwesomeIcon className='text-success' icon={faCheck} ></FontAwesomeIcon></GitUIButton>
           :
-          <FontAwesomeIcon className='ml-auto mr-1 pointer' icon={faToggleOn} onClick={setAsDefault} ></FontAwesomeIcon>
+          <GitUIButton className="btn btn-sm" onClick={setAsDefault}><FontAwesomeIcon icon={faToggleOn}></FontAwesomeIcon></GitUIButton>
         }
-        <FontAwesomeIcon className='ml-auto pointer mr-1' icon={faSync} onClick={async () => {
+        <GitUIButton className="btn btn-sm" onClick={async () => {
           await actions.fetch(remote.remote)
-        }}></FontAwesomeIcon>
-        <FontAwesomeIcon className='ml-auto mr-1 pointer text-danger' icon={faTrash} onClick={() => actions.removeRemote(remote)}></FontAwesomeIcon>
-        {remote?.url && <FontAwesomeIcon className='ml-2 pointer' icon={faGlobe} onClick={() => openRemote()}></FontAwesomeIcon>}
+        }}><FontAwesomeIcon icon={faSync} ></FontAwesomeIcon></GitUIButton>
+        <GitUIButton className="btn btn-sm" onClick={() => actions.removeRemote(remote)}><FontAwesomeIcon className='text-danger' icon={faTrash} ></FontAwesomeIcon></GitUIButton>
+        {remote?.url && <GitUIButton className="btn btn-sm pr-0" onClick={() => openRemote()}><FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon></GitUIButton>}
       </div>
     </>
   );

libs/remix-ui/git/src/components/navigation/sourcecontrol.tsx

@@ -5,6 +5,7 @@ import React, { useContext, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 import { pluginActionsContext } from "../../state/context";
 import { SourceControlButtons } from "../buttons/sourcecontrolbuttons";
+import LoaderIndicator from "./loaderindicator";
 import { SourceControlMenu } from "./menu/sourcecontrolmenu";
 
 export const SourceControlNavigation = ({ eventKey, activePanel, callback }) => {
@@ -27,7 +28,7 @@ export const SourceControlNavigation = ({ eventKey, activePanel, callback }) =>
                         activePanel === eventKey ? <FontAwesomeIcon className='' icon={faCaretDown}></FontAwesomeIcon> : <FontAwesomeIcon className='' icon={faCaretRight}></FontAwesomeIcon>
                     }
                     <label className="nav pl-1 form-check-label">SOURCE CONTROL</label>
-
+                    <LoaderIndicator></LoaderIndicator>
 
                 </span>
 

libs/remix-ui/git/src/components/panels/branches/localbranchdetails.tsx

@@ -9,6 +9,7 @@ import { BrancheDetailsNavigation } from "../../navigation/branchedetails";
 import { CommitDetailsItems } from "../commits/commitdetailsitem";
 import { CommitDetails } from "../commits/commitdetails";
 import { BranchDifferences } from "./branchdifferences";
+import GitUIButton from "../../buttons/gituibutton";
 
 export interface BrancheDetailsProps {
   branch: branch;
@@ -74,7 +75,7 @@ export const LocalBranchDetails = (props: BrancheDetailsProps) => {
 
 
         </div>
-        {hasNextPage && <a href="#" className="cursor-pointer mb-1 ml-2" onClick={loadNextPage}>Load more</a>}
+        {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
       </>
     </Accordion.Collapse>
   </Accordion>)

libs/remix-ui/git/src/components/panels/branches/remotebranchedetails.tsx

@@ -8,6 +8,7 @@ import { branch } from "../../../types";
 import { BrancheDetailsNavigation } from "../../navigation/branchedetails";
 import { CommitDetailsItems } from "../commits/commitdetailsitem";
 import { CommitDetails } from "../commits/commitdetails";
+import GitUIButton from "../../buttons/gituibutton";
 
 export interface BrancheDetailsProps {
   branch: branch;
@@ -93,7 +94,7 @@ export const RemoteBranchDetails = (props: BrancheDetailsProps) => {
 
 
         </div>
-        {hasNextPage && <a href="#" className="cursor-pointer mb-1 ml-2" onClick={loadNextPage}>Load more</a>}
+        {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
       </>
     </Accordion.Collapse>
   </Accordion>)

libs/remix-ui/git/src/components/panels/clone.tsx

@@ -33,11 +33,7 @@ export const Clone = () => {
 
 
     const clone = async () => {
-        try {
-            setTimeout(() => actions.clone(cloneUrl, cloneBranch, cloneDepth, !cloneAllBranches), 1500)
-        } catch (e) {
-
-        }
+        await actions.clone(cloneUrl, cloneBranch, cloneDepth, !cloneAllBranches)
     }
 
     const onCloneBranchChange = (value: string) => {

libs/remix-ui/git/src/components/panels/commits.tsx

@@ -1,7 +1,9 @@
 import { checkout, ReadCommitResult } from "isomorphic-git";
 import React from "react";
 import { gitActionsContext } from "../../state/context";
+import GitUIButton from "../buttons/gituibutton";
 import { gitPluginContext } from "../gitui";
+import LoaderIndicator from "../navigation/loaderindicator";
 import { BranchDifferences } from "./branches/branchdifferences";
 import { CommitDetails } from "./commits/commitdetails";
 import { CommitSummary } from "./commits/commitsummary";
@@ -45,7 +47,7 @@ export const Commits = () => {
                         })}
                     </div>
                 </div>
-                    {hasNextPage && <a href="#" className="cursor-pointer mb-1 ml-2" onClick={loadNextPage}>Load more</a>}
+                    {hasNextPage && <GitUIButton className="mb-1 ml-2 btn btn-sm" onClick={loadNextPage}>Load more</GitUIButton>}
                 </>
                 : <div className="text-muted">No commits</div>}
         </>

libs/remix-ui/git/src/lib/gitactions.ts

@@ -185,10 +185,16 @@ export const currentBranch = async () => {
 }
 
 export const createBranch = async (name: string = "") => {
+  dispatch(setLoading(true))
+  await disableCallBacks()
+  
   if (name) {
     await plugin.call("dGitProvider", "branch", { ref: name });
     await plugin.call("dGitProvider", "checkout", { ref: name });
   }
+
+  dispatch(setLoading(false))
+  await enableCallBacks()
 }
 
 export const getCommitFromRef = async (ref: string) => {
@@ -788,6 +794,8 @@ export const fetchBranch = async (branch: branch, page: number) => {
 }
 
 export const getBranchCommits = async (branch: branch, page: number) => {
+  dispatch(setLoading(true))
+  await disableCallBacks()
   try {
     console.log(branch)
     if (!branch.remote) {
@@ -818,6 +826,8 @@ export const getBranchCommits = async (branch: branch, page: number) => {
     console.log(e)
     await fetchBranch(branch, page)
   }
+  dispatch(setLoading(false))
+  await enableCallBacks()
 }
 
 export const setDefaultRemote = async (remote: remote) => {