Merge pull request #254 from janlauber/fix-loading-animation

fix: loading animation
janlauber · Jun 1, 2024 · 0649a82 · 0649a82
2 parents 3a597b9 + c4c2c64
commit 0649a82
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 27 deletions.
diff --git a/frontend/src/routes/app/+layout.svelte b/frontend/src/routes/app/+layout.svelte
@@ -2,8 +2,7 @@
   import { page } from "$app/stores";
   import Nav from "$lib/components/base/Nav.svelte";
   import { breadcrumbItems } from "$lib/stores/breadcrumb";
-  import { loading } from "$lib/stores/data";
-  import { Breadcrumb, BreadcrumbItem, Heading, Spinner } from "flowbite-svelte";
+  import { Breadcrumb, BreadcrumbItem, Heading } from "flowbite-svelte";
   import { ChevronRight } from "lucide-svelte";
   import { cubicOut } from "svelte/easing";
   import { slide } from "svelte/transition";
@@ -49,18 +48,6 @@
         {/each}
       </Breadcrumb>
     </div>
-
-    {#if $loading && $page.url.pathname.startsWith("/app/projects/")}
-      <div
-        class="absolute top-16 left-64 right-0 bottom-0 flex justify-center items-center bg-gray-50 dark:bg-slate-800 z-20"
-      >
-        <span class="">
-          <Spinner />
-        </span>
-      </div>
-    {:else}
-      <slot />
-    {/if}
     <slot />
   </div>
 </div>
diff --git a/frontend/src/routes/app/+page.svelte b/frontend/src/routes/app/+page.svelte
@@ -4,9 +4,9 @@
   import ProjectCard from "$lib/components/projects/ProjectCard.svelte";
   import { client } from "$lib/pocketbase";
   import type { ProjectsResponse } from "$lib/pocketbase/generated-types";
-  import { projects, blueprints } from "$lib/stores/data";
+  import { projects, blueprints, loading } from "$lib/stores/data";
   import { getTagColor } from "$lib/utils/tags";
-  import { Badge, Button, Heading, Modal } from "flowbite-svelte";
+  import { Badge, Button, Heading, Modal, Spinner } from "flowbite-svelte";
   import { BookDashed, Tag, FolderPlus } from "lucide-svelte";
 
   let projectModal = false;
@@ -84,7 +84,9 @@
       <div class="justify-self-end ml-auto space-x-3">
         <Button
           color="primary"
+          outline
           size="sm"
+          class="dark:text-white dark:border-white"
           on:click={() => {
             goto("/app/blueprints/my-blueprints");
           }}
@@ -138,9 +140,22 @@
       {/each}
     </div>
     <div class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
-      {#each filteredProjects as project (project.id)}
-        <ProjectCard {project} />
-      {/each}
+      {#if $loading}
+        <div
+          class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center bg-gray-50 dark:bg-slate-800 z-20"
+        >
+          <span class="">
+            <Spinner />
+          </span>
+        </div>
+      {:else}
+        {#each filteredProjects as project (project.id)}
+          <ProjectCard {project} />
+        {/each}
+        {#if filteredProjects.length === 0}
+          <div class="flex justify-center items-center w-full col-span-3">No projects found.</div>
+        {/if}
+      {/if}
     </div>
   </div>
 </div>
diff --git a/frontend/src/routes/app/profile/+page.svelte b/frontend/src/routes/app/profile/+page.svelte
@@ -67,7 +67,7 @@
   }
 </script>
 
-<div class="relative h-full max-w-screen-2xl mx-auto p-5">
+<div class="relative h-full max-w-7xl mx-auto mt-20">
   <div class="flex flex-col h-full w-full space-y-4">
     <Card size="xl">
       <div class="flex flex-col space-y-4">

diff --git a/frontend/src/routes/app/projects/[id]/+page.svelte b/frontend/src/routes/app/projects/[id]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import DeploymentCard from "$lib/components/deployments/DeploymentCard.svelte";
-  import { deployments } from "$lib/stores/data";
-  import { Button, Heading } from "flowbite-svelte";
+  import { deployments, loading } from "$lib/stores/data";
+  import { Button, Heading, Spinner } from "flowbite-svelte";
   import { BookDashed } from "lucide-svelte";
 </script>
 
@@ -15,6 +15,8 @@
       <div class="justify-self-end ml-auto">
         <Button
           color="primary"
+          outline
+          class="dark:text-white dark:border-white"
           size="sm"
           on:click={() => {
             goto("/app/blueprints/my-blueprints");
@@ -27,11 +29,21 @@
     </div>
 
     <ul role="list" class="divide-y dark:divide-white/5 divide-gray/5">
-      {#each $deployments as deployment (deployment.id)}
-        <DeploymentCard {deployment} />
-      {/each}
-      {#if $deployments.length === 0}
-        <li class="p-4 text-center text-gray-500 dark:text-gray-400">No deployments found.</li>
+      {#if $loading}
+        <div
+          class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center bg-gray-50 dark:bg-slate-800 z-20"
+        >
+          <span class="">
+            <Spinner />
+          </span>
+        </div>
+      {:else}
+        {#each $deployments as deployment (deployment.id)}
+          <DeploymentCard {deployment} />
+        {/each}
+        {#if $deployments.length === 0}
+          <li class="p-4 text-center text-gray-500 dark:text-gray-400">No deployments found.</li>
+        {/if}
       {/if}
     </ul>
   </div>