diff --git a/package.json b/package.json
index 75e33a03..826613eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "impro",
- "version": "0.18.50",
+ "version": "0.18.51",
"type": "module",
"scripts": {
"start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
diff --git a/src/js/views/settings/plugins.view.js b/src/js/views/settings/plugins.view.js
index 667723cf..afbd0f11 100644
--- a/src/js/views/settings/plugins.view.js
+++ b/src/js/views/settings/plugins.view.js
@@ -1,5 +1,5 @@
import { View } from "/js/views/view.js";
-import { html, render } from "/js/lib/lit-html.js";
+import { html, render, keyed } from "/js/lib/lit-html.js";
import { pageEffect, bindToPage } from "/js/router.js";
import { headerTemplate } from "/js/templates/header.template.js";
import { auth } from "/js/auth.js";
@@ -239,85 +239,90 @@ class SettingsPluginsView extends View {
state.$enablingIds.has(plugin.id) ||
state.$disablingIds.has(plugin.id) ||
isUpdating;
- return html`
-
-
-
- ${plugin.name}
- ${plugin.id.endsWith("__LOCAL")
- ? html`
local`
+ // Keyed to avoid flipping animation when plugins are added / removed
+ return keyed(
+ plugin.id,
+ html`
+
+
+
+ ${plugin.name}
+ ${plugin.id.endsWith("__LOCAL")
+ ? html`local`
+ : ""}
+
+ ${plugin.description
+ ? html`
+ ${plugin.description}
+
`
: ""}
+
+ Version: ${plugin.version}
+
+
+ By ${plugin.author}
+
- ${plugin.description
- ? html`
- ${plugin.description}
-
`
- : ""}
-
- Version: ${plugin.version}
-
-
- By ${plugin.author}
+
+ ${hasUpdate
+ ? html`
`
+ : ""}
+ ${plugin.enabled && plugin.hasSettings
+ ? html`
+ ${settingsIconTemplate()}
+ `
+ : ""}
+
+
togglePlugin(plugin)}
+ >
-
-
- ${hasUpdate
- ? html`
`
- : ""}
- ${plugin.enabled && plugin.hasSettings
- ? html`
- ${settingsIconTemplate()}
- `
- : ""}
-
-
togglePlugin(plugin)}
- >
-
-
- `;
+
+ `,
+ );
})}
`}