Fixed display of paginator and results

src/frontend/src/pages/StorePage/index.tsx

@@ -1,4 +1,3 @@
-import { Search } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import PaginatorComponent from "../../components/PaginatorComponent";
 import ShadTooltip from "../../components/ShadTooltipComponent";
@@ -138,6 +137,7 @@ export default function StorePage(): JSX.Element {
       <Header />
 
       <div className="community-page-arrangement">
+        <div>
           <div className="community-page-nav-arrangement">
             <span className="community-page-nav-title">
               <IconComponent name="Store" className="w-6" />
@@ -151,7 +151,9 @@ export default function StorePage(): JSX.Element {
               >
                 <Button
                   className={`${
-                  errorApiKey && !hasApiKey ? "animate-pulse border-error" : ""
+                    errorApiKey && !hasApiKey
+                      ? "animate-pulse border-error"
+                      : ""
                   }`}
                   variant="primary"
                 >
@@ -180,11 +182,15 @@ export default function StorePage(): JSX.Element {
                   }}
                   value={inputText}
                 />
-              <Search
+                <IconComponent
+                  name={loading ? "Loader2" : "Search"}
                   onClick={() => {
                     setSearchText(inputText);
                   }}
-                className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground"
+                  className={
+                    "absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground" +
+                    (loading ? " animate-spin" : "")
+                  }
                 />
               </div>
               <div className="ml-4 flex w-full gap-2 border-b border-border">
@@ -232,7 +238,7 @@ export default function StorePage(): JSX.Element {
               </div>
             </div>
 
-          <div className="flex items-center gap-2 px-2">
+            <div className="flex h-6 items-center gap-2 px-2">
               {!loadingTags &&
                 tags.map((tag, idx) => (
                   <Badge
@@ -243,7 +249,9 @@ export default function StorePage(): JSX.Element {
                     size="sq"
                     className={cn(
                       "cursor-pointer",
-                    filteredCategories.some((category) => category === tag.name)
+                      filteredCategories.some(
+                        (category) => category === tag.name
+                      )
                         ? "bg-beta-foreground text-background hover:bg-beta-foreground"
                         : ""
                     )}
@@ -254,9 +262,10 @@ export default function StorePage(): JSX.Element {
             </div>
             <div className="flex items-end justify-between">
               <span className="px-0.5 text-sm text-muted-foreground">
-              {!loading && (
+                {(!loading || searchData.length !== 0) && (
                   <>
-                  {totalRowsCount} {totalRowsCount !== 1 ? "results" : "result"}
+                    {totalRowsCount}{" "}
+                    {totalRowsCount !== 1 ? "results" : "result"}
                   </>
                 )}
               </span>
@@ -278,13 +287,7 @@ export default function StorePage(): JSX.Element {
             </div>
 
             <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {loading ? (
-              <>
-                <SkeletonCardComponent />
-                <SkeletonCardComponent />
-                <SkeletonCardComponent />
-              </>
-            ) : (
+              {!loading || searchData.length !== 0 ? (
                 searchData.map((item, idx) => {
                   return (
                     <>
@@ -292,12 +295,18 @@ export default function StorePage(): JSX.Element {
                     </>
                   );
                 })
+              ) : (
+                <>
+                  <SkeletonCardComponent />
+                  <SkeletonCardComponent />
+                  <SkeletonCardComponent />
+                </>
               )}
             </div>
           </div>
-
-        {!loading && (
-          <div className="relative my-3">
+        </div>
+        {(!loading || searchData.length !== 0) && (
+          <div className="relative my-6">
             <PaginatorComponent
               storeComponent={true}
               pageIndex={pageIndex}

src/frontend/src/style/applies.css

@@ -241,7 +241,7 @@
   }
 
   .community-page-arrangement {
-    @apply flex-max-width h-full flex-col overflow-auto bg-background px-16 pb-4;
+    @apply flex-max-width justify-between h-full flex-col overflow-auto bg-background px-16;
   }
 
   .community-page-nav-arrangement {