From befc775b5c75b5c663c61e653f5bec6ffdd1e000 Mon Sep 17 00:00:00 2001
From: Feroze Mohideen <feroze@porter.run>
Date: Fri, 29 Mar 2024 16:28:06 -0400
Subject: [PATCH] Input image while loading (#4469)

---
 .../image-settings/ImageList.tsx              | 25 ++++++++++++++++---
 .../app-dashboard/image-settings/TagList.tsx  | 18 ++++++++++---
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/main/home/app-dashboard/image-settings/ImageList.tsx b/dashboard/src/main/home/app-dashboard/image-settings/ImageList.tsx
index f0f952d55d..c144486642 100644
--- a/dashboard/src/main/home/app-dashboard/image-settings/ImageList.tsx
+++ b/dashboard/src/main/home/app-dashboard/image-settings/ImageList.tsx
@@ -25,11 +25,28 @@ const ImageList: React.FC<Props> = ({ setSelectedImage, loading, images }) => {
   const renderImageList = (): JSX.Element => {
     if (loading) {
       return (
-        <LoadingWrapper>
-          <Loading message={"Loading all images linked to your project"} />
-        </LoadingWrapper>
+        <div>
+          {searchFilter !== "" && (
+            <ImageItem
+              onClick={() => {
+                setSelectedImage({
+                  uri: searchFilter,
+                  artifacts: [],
+                });
+              }}
+            >
+              <img src={addCircle} />
+              {`Use image URL: "${searchFilter}"`}
+            </ImageItem>
+          )}
+          <LoadingWrapper>
+            <Loading message={"Loading all images linked to your project"} />
+          </LoadingWrapper>
+        </div>
       );
-    } else if (images.length === 0 && !searchFilter) {
+    }
+
+    if (images.length === 0 && !searchFilter) {
       return (
         <LoadingWrapper>
           <Text color="helper">No linked images found.</Text>
diff --git a/dashboard/src/main/home/app-dashboard/image-settings/TagList.tsx b/dashboard/src/main/home/app-dashboard/image-settings/TagList.tsx
index 9bfbccfa70..99e20bdcc5 100644
--- a/dashboard/src/main/home/app-dashboard/image-settings/TagList.tsx
+++ b/dashboard/src/main/home/app-dashboard/image-settings/TagList.tsx
@@ -25,9 +25,21 @@ const TagList: React.FC<Props> = ({
   const renderTagList = (): JSX.Element => {
     if (loading) {
       return (
-        <LoadingWrapper>
-          <Loading message={"Loading all images linked to your project"} />
-        </LoadingWrapper>
+        <div>
+          {searchFilter !== "" && (
+            <TagItem
+              onClick={() => {
+                setSelectedTag(searchFilter);
+              }}
+            >
+              <img src={addCircle} />
+              {`Use tag "${searchFilter}"`}
+            </TagItem>
+          )}
+          <LoadingWrapper>
+            <Loading message={"Loading all images linked to your project"} />
+          </LoadingWrapper>
+        </div>
       );
     } else if (selectedImage == null) {
       if (searchFilter) {