Add a timeout for useEffect to fix mobile marquee

orcasound · Sep 26, 2023 · 6483450 · 6483450
1 parent 1d222ec
commit 6483450
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 16 deletions.
diff --git a/server/.formatter.exs b/server/.formatter.exs
@@ -12,7 +12,7 @@
     :ash_json_api
   ],
   subdirectories: ["priv/*/migrations"],
-  plugins: [Phoenix.LiveView.HTMLFormatter],
+  plugins: [Phoenix.LiveView.HTMLFormatter, Spark.Formatter],
   inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"],
   export: [locals_without_parens: [:plug, :uuid_attribute]]
 ]
diff --git a/server/config/config.exs b/server/config/config.exs
@@ -95,6 +95,26 @@ config :orcasite, Oban,
   plugins: [{Oban.Plugins.Pruner, max_age: 7 * 24 * 60 * 60}],
   queues: [default: 10, email: 10]
 
+config :spark, :formatter,
+  remove_parens?: true,
+  "Ash.Resource": [
+    type: Ash.Resource,
+    section_order: [
+      :postgres,
+      :identities,
+      :attributes,
+      :calculations,
+      :relationships,
+      :authentication,
+      :token,
+      :policies,
+      :actions,
+      :admin,
+      :json_api,
+      :graphql
+    ]
+  ]
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"
diff --git a/ui/src/utils/layout.ts b/ui/src/utils/layout.ts
@@ -14,31 +14,46 @@ export function useIsRelativeOverflow(
     const { current: currentTarget } = targetRef;
 
     const trigger = () => {
-      if (!currentContainer || !currentTarget) return;
-      const hasOverflow =
-        currentTarget.clientWidth > currentContainer.clientWidth;
+      setTimeout(() => {
+        if (!currentContainer || !currentTarget) return;
+        const hasOverflow =
+          currentTarget.clientWidth > currentContainer.clientWidth;
 
-      setIsOverflow(hasOverflow);
+        setIsOverflow(hasOverflow);
 
-      if (callback) callback(hasOverflow);
+        if (callback) callback(hasOverflow);
+      }, 100);
     };
 
     if (currentContainer && currentTarget) {
       trigger();
     }
-  }, [callback, containerRef, targetRef, size.width]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    callback,
+    size.width,
+    containerRef,
+    targetRef,
+    containerRef.current,
+    targetRef.current,
+  ]);
 
   return isOverflow;
 }
 
+function useWindowSize(): {
+  height: number | undefined;
+  width: number | undefined;
+} {
+  const isClient = typeof window === "object";
 
-function useWindowSize(): { height: number | undefined; width: number | undefined } {
-  const isClient = typeof window === 'object';
-
-  function getSize(): { height: number | undefined; width: number | undefined } {
+  function getSize(): {
+    height: number | undefined;
+    width: number | undefined;
+  } {
     return {
       width: isClient ? window.innerWidth : undefined,
-      height: isClient ? window.innerHeight : undefined
+      height: isClient ? window.innerHeight : undefined,
     };
   }
 
@@ -53,11 +68,11 @@ function useWindowSize(): { height: number | undefined; width: number | undefine
       setWindowSize(getSize());
     }
 
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
 
-    return (): void => window.removeEventListener('resize', handleResize);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    return (): void => window.removeEventListener("resize", handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Empty array ensures that effect is only run on mount and unmount
 
   return windowSize;
-}
+}