Input image while loading (#4469)

porter-dev · Mar 29, 2024 · befc775 · befc775
1 parent c1d982d
commit befc775
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 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
@@ -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
@@ -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) {