diff --git a/assets/css/app.css b/assets/css/app.css index c9dbe92..b6c7b86 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -74,4 +74,28 @@ 40% { box-shadow: 0 2.5em 0 0; } - } \ No newline at end of file + } + + /* GPU Acceleration utilities */ +@layer utilities { + + + .contain-layout-paint { + contain: layout paint; + } + + .gpu-layer { + will-change: transform; + transform: translateZ(0); + } + + .smooth-scroll { + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; + } +} + +/* Otimizar imagens */ +img { + content-visibility: auto; /* Lazy render */ +} \ No newline at end of file diff --git a/assets/js/app.js b/assets/js/app.js index 4cc9a3e..72f151d 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -19,10 +19,10 @@ import "phoenix_html" // Establish Phoenix Socket and LiveView configuration. import { - Socket + Socket } from "phoenix"; import { - LiveSocket + LiveSocket } from "phoenix_live_view"; import topbar from "../vendor/topbar"; import Alpine from "alpinejs"; @@ -39,29 +39,38 @@ window.addEventListener("scroll-top", () => { }); }); +let scrollThrottle; +window.addEventListener("scroll", () => { + if (scrollThrottle) return; + + scrollThrottle = setTimeout(() => { + scrollThrottle = null; + }, 100); +}, { passive: true }); + let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") let liveSocket = new LiveSocket("/live", Socket, { longPollFallbackMs: 2500, - params: {_csrf_token: csrfToken}, + params: { _csrf_token: csrfToken }, dom: { - onBeforeElUpdated(from, to) { - for (const attr of from.attributes) { - if (attr.name.startsWith("data-js-")) { - to.setAttribute(attr.name, attr.value); - } + onBeforeElUpdated(from, to) { + for (const attr of from.attributes) { + if (attr.name.startsWith("data-js-")) { + to.setAttribute(attr.name, attr.value); } - if (from._x_dataStack) { - window.Alpine.clone(from, to) - } } + if (from._x_dataStack) { + window.Alpine.clone(from, to) + } + } }, hooks: Hooks, uploaders: Uploaders }) // Show progress bar on live navigation and form submits -topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"}) +topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" }) window.addEventListener("phx:page-loading-start", _info => topbar.show(300)) window.addEventListener("phx:page-loading-stop", _info => topbar.hide()) diff --git a/lib/digistab_store_web/components/layouts/root.html.heex b/lib/digistab_store_web/components/layouts/root.html.heex index 97c928a..2b9d53f 100644 --- a/lib/digistab_store_web/components/layouts/root.html.heex +++ b/lib/digistab_store_web/components/layouts/root.html.heex @@ -11,7 +11,7 @@ - + <%= @inner_content %> diff --git a/lib/digistab_store_web/live/products/carousel_index_component.ex b/lib/digistab_store_web/live/products/carousel_index_component.ex index 517c16d..ee163b4 100644 --- a/lib/digistab_store_web/live/products/carousel_index_component.ex +++ b/lib/digistab_store_web/live/products/carousel_index_component.ex @@ -44,6 +44,7 @@ defmodule DigistabStoreWeb.ProductCarousel do this.startInterval(); } }" + x-cloak class="relative w-full overflow-hidden" >
@@ -70,8 +71,9 @@ defmodule DigistabStoreWeb.ProductCarousel do
@@ -83,6 +85,7 @@ defmodule DigistabStoreWeb.ProductCarousel do alt={product.name} class="w-full h-48 object-cover object-center rounded-lg transition-all duration-300 hover:scale-105" loading="lazy" + decoding="async" /> <% else %>
@@ -111,6 +114,7 @@ defmodule DigistabStoreWeb.ProductCarousel do alt={Enum.at(@featured_products, index + 1).name} class="w-full h-48 object-cover object-center rounded-lg transition-all duration-300 hover:scale-105" loading="lazy" + decoding="async" /> <% else %>
diff --git a/lib/digistab_store_web/live/products/index.html.heex b/lib/digistab_store_web/live/products/index.html.heex index 57ee73c..19476a2 100644 --- a/lib/digistab_store_web/live/products/index.html.heex +++ b/lib/digistab_store_web/live/products/index.html.heex @@ -20,7 +20,7 @@ placeholder="search..." value={@query} class="w-full px-4 py-3 bg-white rounded-lg border border-gray-300 shadow-sm focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 text-gray-600 text-lg" - phx-debounce="300" + phx-debounce="500" autocomplete="off" readonly={@loading} /> @@ -51,8 +51,14 @@

<%= @default_section_name %>

-
- <.product_card :for={{_dom_id, product} <- @streams.products} product={product} /> +
+
+ <.product_card product={product} /> +
diff --git a/lib/digistab_store_web/live/products/product_card_component.ex b/lib/digistab_store_web/live/products/product_card_component.ex index 0ddef65..a4dc69c 100644 --- a/lib/digistab_store_web/live/products/product_card_component.ex +++ b/lib/digistab_store_web/live/products/product_card_component.ex @@ -20,26 +20,25 @@ defmodule DigistabStoreWeb.Components.ProductCard do def product_card(assigns) do ~H"""
-
-
- <%= if @product.photos && Enum.any?(@product.photos) do %> -
JS.dispatch("scroll-top")} - class="cursor-pointer" - > - {@product.name} -
- <% else %> -
- <.icon name="hero-photo" class="w-12 h-12 text-gray-400" /> -
- <% end %> -
+
+ <%= if @product.photos && Enum.any?(@product.photos) do %> +
JS.dispatch("scroll-top")} + class="cursor-pointer" + > + {@product.name} +
+ <% else %> +
+ <.icon name="hero-photo" class="w-12 h-12 text-gray-400" /> +
+ <% end %>