add loading logic

calblueprint · Dec 7, 2024 · 407fa28 · 407fa28
1 parent 92652d0
commit 407fa28
Showing 1 changed file with 24 additions and 22 deletions.
diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx
@@ -286,7 +286,11 @@ export default function Page() {
         </Flex>
         {viewingOption === 'myPlants' && (
           <div>
-            {filteredUserPlantList.length ? (
+            {ownedPlants.length === 0 ? (
+              <>Add Plants To Your Garden</>
+            ) : filteredUserPlantList.length === 0 ? (
+              <p>No plants match your current filters.</p>
+            ) : (
               <PlantGridContainer>
                 {filteredUserPlantList.map(ownedPlant => (
                   <PlantCard
@@ -298,33 +302,31 @@ export default function Page() {
                   />
                 ))}
               </PlantGridContainer>
-            ) : (
-              <div>
-                <p>No plants match your current filters.</p>
-              </div>
             )}
           </div>
         )}
         {viewingOption === 'all' && (
           <>
-            filteredPlantList.length === 0 ? (
-            <div>
-              <p>No plants match your current filters.</p>
-            </div>
+            {plants.length === 0 ? (
+              <>Loading...</>
+            ) : filteredPlantList.length === 0 ? (
+              <div>
+                <p>No plants match your current filters.</p>
+              </div>
             ) : (
-            <PlantGridContainer>
-              {filteredPlantList.map(plant => (
-                <PlantCard
-                  key={plant.id}
-                  plant={plant}
-                  canSelect={inAddMode}
-                  isSelected={selectedPlants.includes(plant)}
-                  onClick={() => handlePlantCardClick(plant)}
-                  // aspectRatio="168 / 200"
-                />
-              ))}
-            </PlantGridContainer>
-            )
+              <PlantGridContainer>
+                {filteredPlantList.map(plant => (
+                  <PlantCard
+                    key={plant.id}
+                    plant={plant}
+                    canSelect={inAddMode}
+                    isSelected={selectedPlants.includes(plant)}
+                    onClick={() => handlePlantCardClick(plant)}
+                    // aspectRatio="168 / 200"
+                  />
+                ))}
+              </PlantGridContainer>
+            )}
             {inAddMode && (
               <AddButton
                 $backgroundColor={