AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add lazy loading

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-28 20:19:25 +02:00
parent a1885f38fb
commit a19288a942
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/routes/reddit-tracker/+page.svelte
View File

@ -10,6 +10,7 @@ import { Chart } from 'svelte-echarts'
import Link from "lucide-svelte/icons/external-link"; import Link from "lucide-svelte/icons/external-link";
import ThumbsUp from "lucide-svelte/icons/thumbs-up"; import ThumbsUp from "lucide-svelte/icons/thumbs-up";
import MessageCircle from "lucide-svelte/icons/message-circle"; import MessageCircle from "lucide-svelte/icons/message-circle";
import Lazy from '$lib/components/Lazy.svelte';
export let data; export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@ -57,13 +58,13 @@ import MessageCircle from "lucide-svelte/icons/message-circle";
function removeHttpsStrings(input) { function removeHttpsStrings(input) {
// Split the input string by spaces // Split the input string by spaces
let words = input.split(' '); let words = input?.split(' ');
// Filter out words that contain "https" // Filter out words that contain "https"
let filteredWords = words.filter(word => !word.includes('https')); let filteredWords = words?.filter(word => !word?.includes('https'));
// Join the filtered words back into a single string // Join the filtered words back into a single string
let output = filteredWords.join(' '); let output = filteredWords?.join(' ');
return output; return output;
} }
@ -336,11 +337,11 @@ const optionCompanySpread = {
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<Lazy>
<div class="app w-full h-[150px]"> <div class="app w-full h-[150px]">
<Chart options={optionGraphPost} class="chart" /> <Chart options={optionGraphPost} class="chart" />
</div> </div>
</Lazy>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
@ -358,9 +359,11 @@ const optionCompanySpread = {
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<Lazy>
<div class="app w-full h-[150px]"> <div class="app w-full h-[150px]">
<Chart options={optionGraphComment} class="chart" /> <Chart options={optionGraphComment} class="chart" />
</div> </div>
</Lazy>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
@ -379,15 +382,18 @@ const optionCompanySpread = {
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<Lazy>
<div class="app w-full h-[150px]"> <div class="app w-full h-[150px]">
<Chart options={optionGraphCompanySpread} class="chart" /> <Chart options={optionGraphCompanySpread} class="chart" />
</div> </div>
</Lazy>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
</div> </div>
<div class="mt-10 grid gap-4 md:gap-8 grid-cols-1 text-start"> <div class="mt-10 grid gap-4 md:gap-8 grid-cols-1 text-start">
<Lazy>
<Card.Root class="order-1 overflow-x-scroll h-full"> <Card.Root class="order-1 overflow-x-scroll h-full">
<Card.Header class="flex flex-row items-center"> <Card.Header class="flex flex-row items-center">
<div class="flex flex-col items-start w-full"> <div class="flex flex-col items-start w-full">
@ -442,6 +448,7 @@ const optionCompanySpread = {
{/each} {/each}
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
</Lazy>
<Card.Root class="order-0 overflow-x-scroll h-[500px]"> <Card.Root class="order-0 overflow-x-scroll h-[500px]">
<Card.Header> <Card.Header>
<Card.Title class="text-start text-xl w-full flex flex-row items-center"> <Card.Title class="text-start text-xl w-full flex flex-row items-center">