fix: safari performance

src/routes/init/+page.svelte

@@ -6,11 +6,6 @@
     import DayCard, { type DayType } from './(components)/DayCard.svelte';
     import { events } from '$routes/community/+page.svelte';
     import { Animations } from './(animations)';
-    import Ticket from './(components)/Ticket.svelte';
-    import { getMockContributions } from './helpers';
-    import { randomPick } from '$lib/utils/random';
-    import { tribes } from './tickets/customize/form.svelte';
-    import type { TicketVariant } from './tickets/constants';
     import CountdownCard from './(components)/CountdownCard.svelte';
     import { buildOpenGraphImage } from '$lib/utils/metadata';
     import thumbnail from './(assets)/thumbnail-1.png';
@@ -21,6 +16,19 @@
     import Day2 from './(days)/Day2.svelte';
     import ConsoleImage from './(assets)/console.png';
     import SwagsImage from './(assets)/swag.png';
+    import Ticket0 from './(assets)/mock/ticket-0.png';
+    import Ticket1 from './(assets)/mock/ticket-1.png';
+    import Ticket2 from './(assets)/mock/ticket-2.png';
+    import Ticket3 from './(assets)/mock/ticket-3.png';
+    import Ticket4 from './(assets)/mock/ticket-4.png';
+    import Ticket5 from './(assets)/mock/ticket-5.png';
+    import Ticket6 from './(assets)/mock/ticket-6.png';
+    import Ticket7 from './(assets)/mock/ticket-7.png';
+    import Ticket8 from './(assets)/mock/ticket-8.png';
+    import Ticket9 from './(assets)/mock/ticket-9.png';
+    import Ticket10 from './(assets)/mock/ticket-10.png';
+    import Ticket11 from './(assets)/mock/ticket-11.png';
+    import Ticket12 from './(assets)/mock/ticket-12.png';
 
     const base = new Date('2024-02-26T14:00:00.000Z');
     const kickoff = new Date('2024-02-21T15:00:00.000Z');
@@ -82,41 +90,19 @@
     }
 
     const users = shuffle([
-        { name: 'Eldad Fux', user: 'eldadfux' },
-        { name: 'Thomas', user: 'tglide' },
-        { name: "Walter O'Brien", user: 'walterob' },
-        { name: 'Sara Kaandorp', user: 'sarak' },
-        { name: 'Carla Alexander', user: 'carla' },
-        { name: 'Chen Parnasa', user: 'chenp' },
-        { name: 'Caio Arias', user: 'caioarias' },
-        { name: 'Bradley Schofield', user: '.ionic' },
-        { name: 'Dylan Graham', user: 'dylan' },
-        { name: 'Emma Carpagnano', user: 'emmacarpagnano' },
-        { name: 'Torsten Dittmann', user: 'torstendittmann' },
-        { name: 'Arman Nik', user: 'armanNik' },
-        { name: 'Christy Jacob', user: 'christyjacob4' },
-        { name: 'Damodar Lohani', user: 'lohanidamodar' },
-        { name: 'Jake Barnby', user: 'abnegate' },
-        { name: 'Aditya Oberai', user: 'adityaoberai' },
-        { name: 'Wess Cope', user: 'wess' },
-        { name: 'Matej Bačo', user: 'meldiron' },
-        { name: 'Khushboo Verma', user: 'vermakhushboo' },
-        { name: 'May Ender', user: 'mayender' },
-        { name: 'Elad Shechter', user: 'elad2412' },
-        { name: 'Vincent Ge', user: 'wenYuGe1' },
-        { name: 'Chen Parnasa', user: 'chenparnasa' },
-        { name: 'Tessa Mero', user: 'tessamero' },
-        { name: 'Shimon Newman', user: 'shimonewman' },
-        { name: 'Shmuel Fogel', user: 'fogelito' },
-        { name: 'Steven Nguyen', user: 'stnguyen90' },
-        { name: 'Jade Baudchon', user: 'dajebp' },
-        { name: 'Holly Barclay', user: 'holly' },
-        { name: 'Laura Du Ry', user: 'lauraDuRy' },
-        { name: 'Luke Silver', user: 'loks0n' },
-        { name: 'Sümeyra Bulut', user: 'sumeyra' },
-        { name: 'Dennis Ivy', user: 'divanov11' },
-        { name: 'Andrea Fernández Camps', user: 'andrea' },
-        { name: 'Evan LeAir', user: 'evdog4life' }
+        Ticket0,
+        Ticket1,
+        Ticket2,
+        Ticket3,
+        Ticket4,
+        Ticket5,
+        Ticket6,
+        Ticket7,
+        Ticket8,
+        Ticket9,
+        Ticket10,
+        Ticket11,
+        Ticket12
     ]);
 
     let userIndex = 0;
@@ -130,16 +116,7 @@
 
         userIndex++;
 
-        const tribe = randomPick(tribes);
-
-        return {
-            name: user.name,
-            gh_user: user.user,
-            tribe,
-            variant: randomPick(['default', 'rainbow', 'pink']) as TicketVariant,
-            id: Math.floor(Math.random() * 100000),
-            contributions: getMockContributions()
-        };
+        return user;
     };
 
     const title = 'Init - Appwrite';
@@ -274,13 +251,13 @@
         <div class="tickets">
             <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
             {#each { length: 10 } as _}
-                <Ticket {...getRandomTicket()} disableEffects --base-width="14rem" />
+                <img src={getRandomTicket()} style:width="14rem" style:object-fit="cover" style:object-position="top" alt="Appwrite Init Ticket" />
             {/each}
         </div>
         <div class="tickets">
             <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
             {#each { length: 9 } as _}
-                <Ticket {...getRandomTicket()} disableEffects --base-width="14rem" />
+                <img src={getRandomTicket()} style:width="14rem" style:object-fit="cover" style:object-position="top" alt="Appwrite Init Ticket" />
             {/each}
         </div>
     </div>