ui fix

src/routes/+page.svelte

@@ -8,10 +8,23 @@
   import ArrowUpRight from "lucide-svelte/icons/arrow-up-right";
   import { abbreviateNumber } from "$lib/utils";
   import * as Tabs from "$lib/components/shadcn/tabs/index.js";
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
 
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
 
+  /*
+  import { Chart } from 'svelte-echarts'
+  import { init, use } from 'echarts/core'
+  import { BarChart } from 'echarts/charts'
+  import { GridComponent } from 'echarts/components'
+  import { CanvasRenderer } from 'echarts/renderers'
+
+  // now with tree-shaking
+  use([BarChart, GridComponent, CanvasRenderer])
+  */
+
   export let data;
+  let isLoaded = false;
   let optionsMode = "premium";
 
   function compareTimes(time1, time2) {
@@ -83,6 +96,7 @@
   let Feedback;
 
   onMount(async () => {
+    isLoaded = true;
     Feedback = (await import("$lib/components/Feedback.svelte")).default;
   });
 
@@ -207,11 +221,11 @@
         Clear & <span class="italic text-[#fff]">Simple</span> Market Insight.
       </h1>
 
-      <h2
+      <h1
         class="text-white text-2xl font-semibold text-start w-full pb-4 sm:pl-4 sm:pb-2"
       >
         Dashboard
-      </h2>
+      </h1>
 
       <main class="flex flex-1 flex-col gap-4 sm:p-4 md:gap-8">
         <div class="grid gap-4 md:gap-8 grid-cols-1 lg:grid-cols-2 text-start">
@@ -271,9 +285,7 @@
                   {#each gainersList as item}
                     <Table.Row>
                       <Table.Cell>
-                        {#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
+                        <HoverStockChart symbol={item?.symbol} />
-                          <svelte:component this={Comp} symbol={item?.symbol} />
-                        {/await}
                       </Table.Cell>
                       <Table.Cell
                         class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
@@ -366,9 +378,7 @@
                   {#each losersList as item}
                     <Table.Row>
                       <Table.Cell>
-                        {#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
+                        <HoverStockChart symbol={item?.symbol} />
-                          <svelte:component this={Comp} symbol={item?.symbol} />
-                        {/await}
                       </Table.Cell>
                       <Table.Cell
                         class="hidden sm:table-cell xl:table.-column text-sm sm:text-[1rem]"
@@ -485,13 +495,10 @@
                   {#each optionsTable as item}
                     <Table.Row>
                       <Table.Cell>
-                        {#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
+                        <HoverStockChart
-                          <svelte:component
-                            this={Comp}
                           symbol={item?.ticker}
                           assetType={item?.underlying_type}
                         />
-                        {/await}
                       </Table.Cell>
                       <Table.Cell
                         class="text-right xl:table.-column text-sm sm:text-[1rem] {item?.put_call ===
@@ -553,13 +560,11 @@
               {#if data?.getDashboard?.recentDividends?.length !== 0}
                 <ul style="padding-left: 5px;">
                   {#each data?.getDashboard?.recentDividends as item}
-                    <strong>{item?.name}</strong>
+                    <strong>{item?.name}</strong> (<HoverStockChart
-                    ({#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
-                      <svelte:component
-                        this={Comp}
                       symbol={item?.symbol}
-                      />{/await}) has announced its upcoming dividend details as
+                    />) has announced its upcoming dividend details as of {convertTimestamp(
-                    of {convertTimestamp(item?.updated)}:
+                      item?.updated,
+                    )}:
 
                     <li
                       style="color: #fff; line-height: 22px; margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
@@ -661,12 +666,9 @@
                     <li
                       style="margin-left: 8px; line-height: 22px; margin-bottom: 30px; list-style-type: disc;"
                     >
-                      <strong>{item?.name}</strong>
+                      <strong>{item?.name}</strong> (<HoverStockChart
-                      ({#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
-                        <svelte:component
-                          this={Comp}
                         symbol={item?.symbol}
-                        />{/await})
+                      />)
                       {item?.isToday === true
                         ? "will report today"
                         : [
@@ -741,12 +743,9 @@
               {#if data?.getDashboard?.recentEarnings?.length !== 0}
                 <ul style="padding-left: 5px;">
                   {#each data?.getDashboard?.recentEarnings as item}
-                    <strong>{item?.name}</strong>
+                    <strong>{item?.name}</strong> (<HoverStockChart
-                    ({#await import("$lib/components/HoverStockChart.svelte") then { default: Comp }}
-                      <svelte:component
-                        this={Comp}
                       symbol={item?.symbol}
-                      />{/await}) has released its quarterly earnings at {formatTime(
+                    />) has released its quarterly earnings at {formatTime(
                       item?.time,
                     )}:
 

src/routes/stocks/[tickerID]/+layout.server.ts

@@ -4,7 +4,6 @@ const cleanString = (input) => {
     "Inc.",
     "Incorporated",
     "Holdings",
-    "Corporation",
     "Corporations",
     "LLC",
     "Holdings plc American Depositary Shares",

src/routes/stocks/[tickerID]/+layout.svelte

@@ -301,7 +301,7 @@ function handleTypeOfTrade(state:string)
       item.user === data?.user?.id && item.ticker?.includes($stockTicker),
   );
 
-  $: charNumber = $screenWidth < 640 ? 12 : 25;
+  $: charNumber = $screenWidth < 640 ? 15 : 25;
 
   $: {
     if (
@@ -693,25 +693,12 @@ function handleTypeOfTrade(state:string)
                         <div
                           class="flex flex-row justify-start w-full items-center"
                         >
-                          <!--<img class="rounded-full w-10 h-10" src={logoUrl} alt="" />-->
-                          <div
-                            class="flex-shrink-0 rounded-full w-10 h-10 relative bg-[#141417] flex items-center justify-center border border-slate-800"
-                          >
-                            <img
-                              style="clip-path: circle(50%);"
-                              class="avatar w-6 h-6"
-                              src={`https://financialmodelingprep.com/image-stock/${$stockTicker?.toUpperCase()}.png`}
-                              alt=" "
-                              loading="lazy"
-                            />
-                          </div>
-
                           <div class="flex flex-col items-start ml-2 sm:ml-3">
-                            <span class="text-xs text-blue-400">
+                            <span class="text-md sm:text-lg text-blue-400">
                               {$stockTicker?.toUpperCase()}
                             </span>
                             <span
-                              class="text-sm sm:text-xl font-medium text-slate-100"
+                              class="text-xl sm:text-2xl font-semibold sm:font-bold text-white"
                             >
                               {$displayCompanyName?.length > charNumber
                                 ? $displayCompanyName?.slice(0, charNumber) +