adjusting loading indicators

Author: selfcontained

components/dashboard/src/components/DropDown2.tsx

@@ -17,6 +17,7 @@ import React, {
 } from "react";
 import Arrow from "./Arrow";
 import classNames from "classnames";
+import { SpinnerLoader } from "./Loader";
 
 export interface DropDown2Element {
     id: string;
@@ -171,6 +172,9 @@ export const DropDown2: FunctionComponent<DropDown2Props> = ({
         [setShowDropDown],
     );
 
+    const showInputLoadingIndicator = filteredOptions.length > 0 && loading;
+    const showResultsLoadingIndicator = filteredOptions.length === 0 && loading;
+
     return (
         <div
             onKeyDown={onKeyDown}
@@ -213,16 +217,21 @@ export const DropDown2: FunctionComponent<DropDown2Props> = ({
                                 value={search}
                                 onChange={(e) => updateSearch(e.target.value)}
                             />
+                            {showInputLoadingIndicator && (
+                                <div className="absolute top-0 right-0 h-full flex items-center pr-2">
+                                    <SpinnerLoader />
+                                </div>
+                            )}
                         </div>
                     )}
                     <ul className="max-h-60 overflow-auto">
-                        {loading && (
+                        {showResultsLoadingIndicator && (
                             <div className="flex-col space-y-2 animate-pulse">
                                 <div className="bg-gray-300 dark:bg-gray-500 h-4 rounded" />
                                 <div className="bg-gray-300 dark:bg-gray-500 h-4 rounded" />
                             </div>
                         )}
-                        {!loading && filteredOptions.length > 0 ? (
+                        {!showResultsLoadingIndicator && filteredOptions.length > 0 ? (
                             filteredOptions.map((element) => {
                                 let selectionClasses = `dark:bg-gray-800 cursor-pointer`;
                                 if (element.id === selectedElementTemp) {
@@ -250,7 +259,7 @@ export const DropDown2: FunctionComponent<DropDown2Props> = ({
                                     </li>
                                 );
                             })
-                        ) : !loading ? (
+                        ) : !showResultsLoadingIndicator ? (
                             <li key="no-elements" className={"rounded-md "}>
                                 <div className="h-12 pl-8 py-3 text-gray-800 dark:text-gray-200">No results</div>
                             </li>

components/dashboard/src/components/RepositoryFinder.tsx

@@ -119,21 +119,21 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
                 const filteredResults = filterRepos(searchString, normalizedRepos);
                 return filteredResults.map(
                     (repo) =>
-                    ({
-                        id: repo.url,
-                        element: (
-                            <div className="flex-col ml-1 mt-1 flex-grow">
-                                <div className="flex">
-                                    <div className="text-gray-700 dark:text-gray-300 font-semibold">
-                                        {stripOffProtocol(repo.url)}
+                        ({
+                            id: repo.url,
+                            element: (
+                                <div className="flex-col ml-1 mt-1 flex-grow">
+                                    <div className="flex">
+                                        <div className="text-gray-700 dark:text-gray-300 font-semibold">
+                                            {stripOffProtocol(repo.url)}
+                                        </div>
+                                        <div className="ml-1 text-gray-400">{}</div>
                                     </div>
-                                    <div className="ml-1 text-gray-400">{ }</div>
+                                    <div className="flex text-xs text-gray-400">{}</div>
                                 </div>
-                                <div className="flex text-xs text-gray-400">{ }</div>
-                            </div>
-                        ),
-                        isSelectable: true,
-                    } as DropDown2Element),
+                            ),
+                            isSelectable: true,
+                        } as DropDown2Element),
                 );
             }
 
@@ -157,20 +157,19 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
             onSelectionChange={handleSelectionChange}
             disabled={props.disabled}
             // Only consider the isLoading prop if we're including projects in list
-            loading={isLoading && includeProjectsOnCreateWorkspace}
+            loading={includeProjectsOnCreateWorkspace && (isLoading || isSearching)}
             searchPlaceholder="Paste repository URL or type to find suggestions"
             onSearchChange={setSearchString}
         >
-            {/* TODO: add a subtle indicator for the isSearching state */}
             <DropDown2SelectedElement
                 icon={RepositorySVG}
                 htmlTitle={displayContextUrl(props.selectedContextURL) || "Repository"}
                 title={
                     <div className="truncate w-80">
                         {displayContextUrl(
                             selectedSuggestion?.projectName ||
-                            selectedSuggestion?.repositoryName ||
-                            selectedSuggestion?.url,
+                                selectedSuggestion?.repositoryName ||
+                                selectedSuggestion?.url,
                         ) || "Select a repository"}
                     </div>
                 }
@@ -180,7 +179,7 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
                         ? displayContextUrl(selectedSuggestion?.url)
                         : undefined
                 }
-                loading={isLoading && includeProjectsOnCreateWorkspace}
+                loading={includeProjectsOnCreateWorkspace && isLoading}
             />
         </DropDown2>
     );
@@ -260,7 +259,7 @@ function filterRepos(searchString: string, suggestedRepos: SuggestedRepository[]
                 // If the normalizedSearchString is a URL, and it's not present in the proposed results, "artificially" add it here.
                 new URL(normalizedSearchString);
                 results.push({ url: normalizedSearchString });
-            } catch { }
+            } catch {}
         }
     }
 

components/dashboard/src/data/git-providers/search-repositories-query.ts

@@ -26,6 +26,9 @@ export const useSearchRepositories = ({ searchString }: { searchString: string }
             enabled: searchString.length >= 3 && !!org,
             // Need this to keep previous results while we wait for a new search to complete since debouncedSearchString changes and updates the key
             keepPreviousData: true,
+            // We intentionally don't want to trigger refetches here
+            refetchOnWindowFocus: false,
+            refetchOnReconnect: false,
         },
     );
 };