feat: add spinnerLoader in a Teleport tag vuejs, so cool

FlorianBx · Nov 22, 2023 · 4d1253a · 4d1253a
1 parent 4c8f35d
commit 4d1253a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <div id="modal-and-loader"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/components/LoadingCircle.vue b/src/components/LoadingCircle.vue
@@ -4,11 +4,11 @@
 
 <style scoped>
 .loader {
-  border: 4px solid transparent;
-  border-top: 4px solid #3498db;
+  border: 5px solid transparent;
+  border-top: 10px solid #3498db;
   border-radius: 50%;
-  width: 50px;
-  height: 50px;
+  width: 105px;
+  height: 105px;
   animation: spin 0.7s cubic-bezier(0.42, 0, 0.58, 1) infinite;
 }
 

diff --git a/src/style.css b/src/style.css
@@ -39,6 +39,19 @@ body::-webkit-scrollbar{
   display: none;
 }
 
+#modal-and-loader {
+  position: fixed;
+  top: -250px;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+
 .animate-fadeIn {
   animation: fadeIn 0.5s ease-in-out;
 }

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -22,9 +22,11 @@ onMounted(() => {
       <div class="flex justify-center w-full pb-6">
         <SearchBar />
       </div>
-      <div v-show="isLoading" class="flex justify-center w-full">
-        <LoadingCircle />
-      </div>
+      <Teleport to="#modal-and-loader">
+        <div v-show="isLoading" class="flex justify-center w-full">
+          <LoadingCircle />
+        </div>
+      </Teleport>
       <section
         class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 gap-y-8"
       >

diff --git a/src/views/ShowSnippetView.vue b/src/views/ShowSnippetView.vue
@@ -7,13 +7,14 @@ import { useGetSnippets } from "../composables/useGetSnippets";
 import { useClipboard } from "@vueuse/core";
 import PencilIcon from "../assets/icons/PencilIcon.vue";
 import CopyIcon from "../assets/icons/CopyIcon.vue";
+import LoadingCircle from "../components/LoadingCircle.vue";
 import "../assets/highlight-syntax.css";
 
 const authStore = useAuthStore();
 const router = useRouter();
 const date = new Date();
 const id = router.currentRoute.value.params.id;
-const { snippet, fetchSnippetById } = useGetSnippets();
+const { isLoading, snippet, fetchSnippetById } = useGetSnippets();
 
 const snippetData = reactive({
   id: id as string,
@@ -78,6 +79,11 @@ onMounted(async () => {
             Snippet: {{ snippetData.title }}
           </h3>
         </div>
+        <Teleport to="#modal-and-loader">
+          <div v-show="isLoading" class="flex justify-center w-full">
+            <LoadingCircle />
+          </div>
+        </Teleport>
         <form class="space-y-6">
           <div>
             <h3>{{ snippetData.title }}</h3>