Merge pull request #5 from OsirisFrik/main

feat: add loading prop

Author: BrayamValero

README.md

@@ -98,6 +98,23 @@ This code snippet ensures the generation of precisely proportioned skeletons for
 without needing any additional configuration. Moreover, it orchestrates a seamless transition, waiting until the content
 is fully loaded before concealing the Skeleton and unveiling the loaded content gracefully.
 
+#### Manual Loading
+
+Use the `loading` prop to manually control the loading state of the skeleton.
+
+```html
+<template>
+    <div class="Home">
+        <h1>
+            <Skeleton :loading="loading">{{ data.title }}</Skeleton>
+        </h1>
+        <p>
+            <Skeleton :loading="loading" :rows="3">{{ data.description }}</Skeleton>
+        </p>
+    </div>
+</template>
+```
+
 ### :warning: Avoid the creation of dedicated skeleton screens
 
 Instead, craft components equipped with integrated skeleton states.
@@ -147,6 +164,7 @@ Down bellow you can take a look at each prop available.
 | circle         | `boolean` | Set component `border-radius` to 50%, it replaces borderRadius props | `false` |
 | containerClass | `string`  | Set component class to skeleton container                            | `null`  |
 | childClass     | `string`  | Set component class to each skeleton child                           | `null`  |
+| loading        | `boolean` | Set component loading state                                          | `undefined` |
 
 ### `<Skeleton>` `<SkeletonTheme>`
 

package-lock.json

@@ -6,6 +6,7 @@ import SkeletonTheme from '@components/SkeletonTheme.vue'
 const data: any = ref({})
 
 const loading = ref(true)
+const manualLoading = ref(true)
 
 const fetchData = () => {
     // Title & Description
@@ -59,6 +60,29 @@ onMounted(() => {
                 </small>
             </div>
         </section>
+        <!-- User Profile manually example -->
+        <h2 class="mb-2">Inline loading with static data</h2>
+        <section class="user">
+            <picture class="user-avatar">
+                <Skeleton :loading="manualLoading" childClass="user-avatar" background-color="#666">
+                    <img :src="data.img" />
+                </Skeleton>
+            </picture>
+            <div class="user-info">
+                <h3>
+                    <Skeleton :loading="manualLoading" :width="150">{{ data.name }}</Skeleton>
+                </h3>
+                <p>
+                    <Skeleton :loading="manualLoading" :width="120">{{ data.role }}</Skeleton>
+                </p>
+                <small>
+                    <Skeleton :loading="manualLoading" :width="100">{{ data.email }}</Skeleton>
+                </small>
+            </div>
+        </section>
+
+        <button @click="manualLoading = !manualLoading">Toggle Manual Loading</button>
+
         <!-- Inline Elements -->
         <section class="inline">
             <h2 class="mb-2">Inline loading with static data</h2>

src/App.vue

@@ -7,6 +7,7 @@ const props = withDefaults(defineProps<SkeletonProps>(), {
     rows: 1,
     enableAnimation: undefined,
     inline: undefined,
+    loading: undefined
 })
 
 const theme = inject(ThemeInjection, {})
@@ -19,6 +20,8 @@ const getRows = computed<number>(() => {
 const slots: any = useSlots()
 
 const getLoadingStatus = computed<boolean>(() => {
+    if (props.loading !== undefined) return !props.loading
+    
     if (slots.default) return slots.default()[0].children || false
 })
 

src/components/Skeleton.vue

@@ -15,4 +15,5 @@ export interface SkeletonProps extends SkeletonThemeProps {
     circle?: boolean
     containerClass?: string
     childClass?: string
+    loading?: boolean
 }