ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add image loader

Browse Source
This commit is contained in:
Rotimi Best
2023-09-13 06:49:26 +01:00
parent ecbd75b00f
commit 63a96cce44
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Courses/components/Card/index.svelte
+9 -4
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Tag } from 'carbon-components-svelte'; import { Tag, ImageLoader, SkeletonPlaceholder } from 'carbon-components-svelte';
// import { ROLE } from '$lib/utils/constants/roles'; // import { ROLE } from '$lib/utils/constants/roles';
import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter'; import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
@@ -54,11 +54,16 @@
> >
<div class="p-4"> <div class="p-4">
<div class=" mb-5"> <div class=" mb-5">
<img <ImageLoader
class="h-2/5 w-full rounded"
src={bannerImage ?? '/images/classroomio-course-img-template.jpg'} src={bannerImage ?? '/images/classroomio-course-img-template.jpg'}
alt="Course Logo" alt="Course Logo"
/> class="h-2/5 w-full rounded"
>
<svelte:fragment slot="loading">
<SkeletonPlaceholder style="width: 100%; height: 10rem;" />
</svelte:fragment>
<svelte:fragment slot="error">An error occurred.</svelte:fragment>
</ImageLoader>
</div> </div>
<h3 class="text-xl dark:text-white title">{title}</h3> <h3 class="text-xl dark:text-white title">{title}</h3>