fix: Infininite loop in backgrounds (#4299)

## Description

Just inifinite loop fix

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-image.tsx

@@ -1,4 +1,4 @@
-import { InvalidValue } from "@webstudio-is/css-engine";
+import type { InvalidValue, StyleValue } from "@webstudio-is/css-engine";
 import {
   TextArea,
   textVariants,
@@ -9,9 +9,8 @@ import {
   Tooltip,
   Text,
 } from "@webstudio-is/design-system";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState } from "react";
 import type {} from "../../controls";
-import { useStore } from "@nanostores/react";
 import { $assets } from "~/shared/nano-states";
 import type { StyleUpdateOptions } from "../../shared/use-style-data";
 import { InfoCircleIcon } from "@webstudio-is/icons";
@@ -35,54 +34,72 @@ const isAbsoluteURL = (value: string) => {
   }
 };
 
-export const BackgroundImage = ({ index }: { index: number }) => {
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const assets = useStore($assets);
-  const styleDecl = useComputedStyleDecl("backgroundImage");
-  const styleValue = getRepeatedStyleItem(styleDecl, index);
-  const [errors, setErrors] = useState<string[]>([]);
-  const [intermediateValue, setIntermediateValue] = useState<
-    IntermediateValue | InvalidValue | undefined
-  >(undefined);
-
-  useEffect(() => {
-    if (styleValue === undefined) {
-      return;
+const getInitialErrors = (styleValue: StyleValue | undefined): string[] => {
+  const assets = $assets.get();
+  if (styleValue === undefined) {
+    return [];
+  }
+  if (styleValue.type === "image") {
+    if (styleValue.value.type === "asset") {
+      const asset = assets.get(styleValue.value.value);
+      if (asset === undefined || asset.type !== "image") {
+        return [`Asset ${styleValue.value.value} is not found in project`];
+      }
     }
+  }
+  return [];
+};
 
-    if (styleValue.type === "keyword") {
-      setIntermediateValue({
-        type: "intermediate",
-        value: styleValue.value,
-      });
-    }
+const getInitialValue = (
+  styleValue: StyleValue | undefined
+): IntermediateValue | InvalidValue | undefined => {
+  const assets = $assets.get();
 
-    let backgroundUrl;
-    if (styleValue.type === "image") {
-      if (styleValue.value.type === "asset") {
-        const asset = assets.get(styleValue.value.value);
-        if (asset === undefined || asset.type !== "image") {
-          setErrors(["Asset not found"]);
-          setIntermediateValue({
-            type: "invalid",
-            value: styleValue.value.value,
-          });
-          return;
-        }
-        backgroundUrl = `url(${asset.name})`;
-      }
+  if (styleValue === undefined) {
+    return;
+  }
 
-      if (styleValue.value.type === "url") {
-        backgroundUrl = `url(${styleValue.value.url})`;
+  if (styleValue.type === "keyword") {
+    return {
+      type: "intermediate",
+      value: styleValue.value,
+    };
+  }
+
+  let backgroundUrl;
+  if (styleValue.type === "image") {
+    if (styleValue.value.type === "asset") {
+      const asset = assets.get(styleValue.value.value);
+      if (asset === undefined || asset.type !== "image") {
+        return {
+          type: "invalid",
+          value: styleValue.value.value,
+        };
       }
+      backgroundUrl = `url(${asset.name})`;
+    }
 
-      setIntermediateValue(
-        backgroundUrl !== undefined
-          ? { type: "intermediate", value: backgroundUrl }
-          : undefined
-      );
+    if (styleValue.value.type === "url") {
+      backgroundUrl = `url(${styleValue.value.url})`;
     }
-  }, [styleValue, assets]);
+
+    return backgroundUrl !== undefined
+      ? { type: "intermediate", value: backgroundUrl }
+      : undefined;
+  }
+};
+
+export const BackgroundImage = ({ index }: { index: number }) => {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  const styleDecl = useComputedStyleDecl("backgroundImage");
+  const styleValue = getRepeatedStyleItem(styleDecl, index);
+  const [errors, setErrors] = useState<string[]>(() =>
+    getInitialErrors(styleValue)
+  );
+  const [intermediateValue, setIntermediateValue] = useState<
+    IntermediateValue | InvalidValue | undefined
+  >(() => getInitialValue(styleValue));
 
   const handleChange = (value: string, options: StyleUpdateOptions) => {
     setIntermediateValue({