@mittwald/flow-react-components 0.2.0-alpha.448 → 0.2.0-alpha.449

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.449](https://github.com/mittwald/flow/compare/0.2.0-alpha.448...0.2.0-alpha.449) (2025-09-02)
+
+### Bug Fixes
+
+* **List:** flickering loading view ([#1939](https://github.com/mittwald/flow/issues/1939)) ([bd1c028](https://github.com/mittwald/flow/commit/bd1c0284ead0cd5e486193f72d796576acbd46e2))
+
 # [0.2.0-alpha.448](https://github.com/mittwald/flow/compare/0.2.0-alpha.447...0.2.0-alpha.448) (2025-09-02)
 
 ### Bug Fixes

package/dist/assets/doc-properties.json

@@ -78623,128 +78623,6 @@
       }
     }
   },
-  {
-    "tags": {
-      "flr-generate": "all",
-      "flr-clear-props-context": ""
-    },
-    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/MessageThread/MessageThread.tsx",
-    "description": "",
-    "displayName": "MessageThread",
-    "methods": [],
-    "props": {
-      "children": {
-        "defaultValue": null,
-        "description": "",
-        "name": "children",
-        "declarations": [
-          {
-            "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
-            "name": "TypeLiteral"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "ReactNode"
-        }
-      },
-      "className": {
-        "defaultValue": null,
-        "description": "The elements class name.",
-        "name": "className",
-        "parent": {
-          "fileName": "components/src/lib/types/props.ts",
-          "name": "PropsWithClassName"
-        },
-        "declarations": [
-          {
-            "fileName": "components/src/lib/types/props.ts",
-            "name": "PropsWithClassName"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "string"
-        }
-      },
-      "wrapWith": {
-        "defaultValue": null,
-        "description": "",
-        "name": "wrapWith",
-        "parent": {
-          "fileName": "components/src/lib/componentFactory/flowComponent.tsx",
-          "name": "FlowComponentProps"
-        },
-        "declarations": [
-          {
-            "fileName": "components/src/lib/componentFactory/flowComponent.tsx",
-            "name": "FlowComponentProps"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "ReactElement<unknown, string | JSXElementConstructor<any>>"
-        }
-      },
-      "tunnelId": {
-        "defaultValue": null,
-        "description": "@internal",
-        "name": "tunnelId",
-        "parent": {
-          "fileName": "components/src/lib/types/props.ts",
-          "name": "PropsWithTunnel"
-        },
-        "declarations": [
-          {
-            "fileName": "components/src/lib/types/props.ts",
-            "name": "PropsWithTunnel"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "string | null"
-        }
-      },
-      "ref": {
-        "defaultValue": null,
-        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",
-        "name": "ref",
-        "parent": {
-          "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
-          "name": "RefAttributes"
-        },
-        "declarations": [
-          {
-            "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
-            "name": "RefAttributes"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "Ref<HTMLInputElement>"
-        }
-      },
-      "key": {
-        "defaultValue": null,
-        "description": "",
-        "name": "key",
-        "parent": {
-          "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
-          "name": "Attributes"
-        },
-        "declarations": [
-          {
-            "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
-            "name": "Attributes"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "Key | null"
-        }
-      }
-    }
-  },
   {
     "tags": {},
     "filePath": "/home/runner/work/flow/flow/packages/components/src/components/Modal/Modal.tsx",
@@ -78982,6 +78860,128 @@
       }
     }
   },
+  {
+    "tags": {
+      "flr-generate": "all",
+      "flr-clear-props-context": ""
+    },
+    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/MessageThread/MessageThread.tsx",
+    "description": "",
+    "displayName": "MessageThread",
+    "methods": [],
+    "props": {
+      "children": {
+        "defaultValue": null,
+        "description": "",
+        "name": "children",
+        "declarations": [
+          {
+            "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "The elements class name.",
+        "name": "className",
+        "parent": {
+          "fileName": "components/src/lib/types/props.ts",
+          "name": "PropsWithClassName"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/lib/types/props.ts",
+            "name": "PropsWithClassName"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "wrapWith": {
+        "defaultValue": null,
+        "description": "",
+        "name": "wrapWith",
+        "parent": {
+          "fileName": "components/src/lib/componentFactory/flowComponent.tsx",
+          "name": "FlowComponentProps"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/lib/componentFactory/flowComponent.tsx",
+            "name": "FlowComponentProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactElement<unknown, string | JSXElementConstructor<any>>"
+        }
+      },
+      "tunnelId": {
+        "defaultValue": null,
+        "description": "@internal",
+        "name": "tunnelId",
+        "parent": {
+          "fileName": "components/src/lib/types/props.ts",
+          "name": "PropsWithTunnel"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/lib/types/props.ts",
+            "name": "PropsWithTunnel"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string | null"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",
+        "name": "ref",
+        "parent": {
+          "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLInputElement>"
+        }
+      },
+      "key": {
+        "defaultValue": null,
+        "description": "",
+        "name": "key",
+        "parent": {
+          "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+          "name": "Attributes"
+        },
+        "declarations": [
+          {
+            "fileName": "flow/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
+            "name": "Attributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Key | null"
+        }
+      }
+    }
+  },
   {
     "tags": {
       "flr-generate": "all",
@@ -288586,55 +288586,6 @@
       }
     }
   },
-  {
-    "tags": {
-      "internal": ""
-    },
-    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
-    "description": "",
-    "displayName": "ValidationResultEntry",
-    "methods": [],
-    "props": {
-      "result": {
-        "defaultValue": null,
-        "description": "",
-        "name": "result",
-        "parent": {
-          "fileName": "components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
-          "name": "Props"
-        },
-        "declarations": [
-          {
-            "fileName": "components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
-            "name": "Props"
-          }
-        ],
-        "required": true,
-        "type": {
-          "name": "Partial<RuleValidationResult>"
-        }
-      },
-      "unspecifiedRules": {
-        "defaultValue": null,
-        "description": "",
-        "name": "unspecifiedRules",
-        "parent": {
-          "fileName": "components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
-          "name": "Props"
-        },
-        "declarations": [
-          {
-            "fileName": "components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
-            "name": "Props"
-          }
-        ],
-        "required": false,
-        "type": {
-          "name": "boolean"
-        }
-      }
-    }
-  },
   {
     "tags": {},
     "filePath": "/home/runner/work/flow/flow/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx",
@@ -288720,6 +288671,55 @@
       }
     }
   },
+  {
+    "tags": {
+      "internal": ""
+    },
+    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
+    "description": "",
+    "displayName": "ValidationResultEntry",
+    "methods": [],
+    "props": {
+      "result": {
+        "defaultValue": null,
+        "description": "",
+        "name": "result",
+        "parent": {
+          "fileName": "components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
+            "name": "Props"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "Partial<RuleValidationResult>"
+        }
+      },
+      "unspecifiedRules": {
+        "defaultValue": null,
+        "description": "",
+        "name": "unspecifiedRules",
+        "parent": {
+          "fileName": "components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
+          "name": "Props"
+        },
+        "declarations": [
+          {
+            "fileName": "components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx",
+            "name": "Props"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      }
+    }
+  },
   {
     "tags": {
       "internal": ""

package/dist/js/components/src/components/List/components/Items/Items.mjs

@@ -55,7 +55,7 @@ const Items = () => {
         gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`
       },
       layout: list.viewMode === "tiles" ? "grid" : "stack",
-      children: isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
+      children: items.length === 0 && isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
     }
   ) });
 };

package/dist/js/components/src/components/List/components/Items/Items.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Items.mjs","sources":["../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode === \"tiles\";\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item) => (\n    <Item key={item.id} data={item.data} id={item.id} />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...list.componentProps}\n        renderEmptyState={() => <EmptyView />}\n        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`,\n        }}\n        layout={list.viewMode === \"tiles\" ? \"grid\" : \"stack\"}\n      >\n        {isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,KAAA,GAAQ,KAAK,QAAa,KAAA,OAAA;AAChC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAI,IAAA,CAAC,KAAK,QAAU,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAA,GAAA,CAAC,IAAmB,EAAA,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA,EAAA,EAAI,KAAK,EAAnC,EAAA,EAAA,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,SAAS,MAAO,CAAA;AAAA,GAClB;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAa,EAAA,kBAAA,EAAoB,aAAW,SACnD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAK,CAAA,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,MACnC,KAAO,EAAA;AAAA,QACL,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,IAAK,CAAA,QAAA,CAAS,YAAY,CAAA,SAAA;AAAA,OAC7E;AAAA,MACA,MAAQ,EAAA,IAAA,CAAK,QAAa,KAAA,OAAA,GAAU,MAAS,GAAA,OAAA;AAAA,MAE5C,QAAA,EAAA,kBAAA,mBAAsB,GAAA,CAAA,aAAA,EAAA,EAAc,CAAK,GAAA;AAAA;AAAA,GAE9C,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Items.mjs","sources":["../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode === \"tiles\";\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item) => (\n    <Item key={item.id} data={item.data} id={item.id} />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...list.componentProps}\n        renderEmptyState={() => <EmptyView />}\n        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`,\n        }}\n        layout={list.viewMode === \"tiles\" ? \"grid\" : \"stack\"}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,KAAA,GAAQ,KAAK,QAAa,KAAA,OAAA;AAChC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAI,IAAA,CAAC,KAAK,QAAU,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAA,GAAA,CAAC,IAAmB,EAAA,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA,EAAA,EAAI,KAAK,EAAnC,EAAA,EAAA,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,SAAS,MAAO,CAAA;AAAA,GAClB;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAa,EAAA,kBAAA,EAAoB,aAAW,SACnD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAK,CAAA,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,MACnC,KAAO,EAAA;AAAA,QACL,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,IAAK,CAAA,QAAA,CAAS,YAAY,CAAA,SAAA;AAAA,OAC7E;AAAA,MACA,MAAQ,EAAA,IAAA,CAAK,QAAa,KAAA,OAAA,GAAU,MAAS,GAAA,OAAA;AAAA,MAE5C,gBAAM,MAAW,KAAA,CAAA,IAAK,kBAAqB,mBAAA,GAAA,CAAC,iBAAc,CAAK,GAAA;AAAA;AAAA,GAEpE,EAAA,CAAA;AAEJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.448",
+  "version": "0.2.0-alpha.449",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@internationalized/string-compiler": "^3.2.6",
     "@mittwald/password-tools-js": "3.0.0-alpha.18",
-    "@mittwald/react-tunnel": "0.2.0-alpha.448",
+    "@mittwald/react-tunnel": "0.2.0-alpha.449",
     "@mittwald/react-use-promise": "^3.0.4",
     "@react-aria/form": "^3.1.0",
     "@react-aria/live-announcer": "^3.4.4",
@@ -99,7 +99,7 @@
     "@faker-js/faker": "^9.9.0",
     "@internationalized/date": "^3.8.2",
     "@mittwald/flow-core": "",
-    "@mittwald/flow-design-tokens": "0.2.0-alpha.448",
+    "@mittwald/flow-design-tokens": "0.2.0-alpha.449",
     "@mittwald/react-use-promise": "^3.0.4",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.3",
     "@mittwald/typescript-config": "",
@@ -172,5 +172,5 @@
       "optional": true
     }
   },
-  "gitHead": "ef7a3b5c71a2139a682d608137cc441b8a725ab1"
+  "gitHead": "416c3b7c36df3aa2fb5a1ff62aa577b48c11bf37"
 }