Performance optimization: Removed creature document from injection to prevent uneccessary Vue re-rendering

app/imports/ui/creature/character/CharacterSheet.vue

@@ -95,7 +95,7 @@
 		},
     reactiveProvide: {
       name: 'context',
-      include: ['creature', 'editPermission'],
+      include: ['creatureId', 'editPermission'],
     },
     computed: {
       activeTab: {
@@ -150,9 +150,6 @@
           return false;
         }
       },
-      snackbars(){
-
-      }
 		},
 	}
 </script>

app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue

@@ -3,7 +3,7 @@
     <column-layout wide-columns>
       <div>
         <toolbar-card
-          :color="context.creature.color"
+          :color="creature.color"
         >
           <v-toolbar-title slot="toolbar">
             Equipped
@@ -19,7 +19,7 @@
       </div>
       <div>
         <toolbar-card
-          :color="context.creature.color"
+          :color="creature.color"
         >
           <v-toolbar-title slot="toolbar">
             Carried
@@ -46,6 +46,7 @@
 
 <script>
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+import Creatures from '/imports/api/creature/Creatures.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import ContainerCard from '/imports/ui/properties/components/inventory/ContainerCard.vue';
 import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
@@ -60,9 +61,6 @@ export default {
     ToolbarCard,
     ItemList,
 	},
-  inject: {
-    context: { default: {} }
-  },
 	props: {
 		creatureId: {
       type: String,
@@ -83,6 +81,9 @@ export default {
 				sort: {order: 1},
 			});
 		},
+    creature(){
+      return Creatures.findOne(this.creatureId, {fields: {color: 1}});
+    },
 		containersWithoutAncestorContainers(){
 			return CreatureProperties.find({
 				'ancestors.id': {

app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue

@@ -34,9 +34,6 @@ export default {
     SpellList,
 		SpellListCard,
 	},
-  inject: {
-    context: { default: {} }
-  },
 	props: {
 		creatureId: {
       type: String,

app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -129,11 +129,14 @@ export default {
       );
       if (!nearestCreatureAncestor) return;
       return Creatures.findOne(nearestCreatureAncestor.id);
-    }
+    },
+    creatureId(){
+      return this.creature && this.creature._id;
+    },
   },
   reactiveProvide: {
     name: 'context',
-    include: ['creature', 'editPermission'],
+    include: ['creatureId', 'editPermission'],
   },
   methods: {
     getPropertyName,

app/imports/ui/creature/slots/SlotDetailsDialog.vue

@@ -28,13 +28,8 @@ export default {
   },
   reactiveProvide: {
     name: 'context',
-    include: ['creature'],
+    include: ['creatureId'],
   },
-  meteor: {
-    creature(){
-      return Creatures.findOne(this.creatureId);
-    },
-  }
 }
 </script>
 

app/imports/ui/creature/slots/SlotFillDialog.vue

@@ -168,7 +168,7 @@ export default {
   },
   reactiveProvide: {
     name: 'context',
-    include: ['creature'],
+    include: ['creatureId'],
   },
   methods:{
     getTitle(model){

app/imports/ui/creature/slots/Slots.vue

@@ -63,9 +63,6 @@ export default {
   components: {
     TreeNodeView,
   },
-  inject: {
-    context: { default: {} }
-  },
   props: {
     creatureId: {
       type: String,

app/imports/ui/properties/components/actions/ItemConsumedView.vue

@@ -6,7 +6,7 @@
     }"
   >
     <v-menu
-      v-if="context.creature"
+      v-if="context.creatureId"
       transition="slide-y-transition"
       lazy
       :disabled="!context.editPermission"
@@ -17,7 +17,7 @@
           style="height: 100%;"
           :class="{
             'error--text': insufficient,
-            'clickable': context.creature && context.editPermission,
+            'clickable': context.creatureId && context.editPermission,
             'left-pad': leftPad,
           }"
           v-on="on"

app/imports/ui/properties/components/attributes/HealthBar.vue

@@ -75,9 +75,6 @@ import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 	export default {
     components: {
       IncrementMenu
-    },
-    inject: {
-      context: { default: {} }
     },
 		props: {
 			value: Number,

app/imports/ui/properties/components/attributes/HealthBarCard.vue

@@ -17,9 +17,6 @@
 	import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
 
 	export default {
-    inject: {
-      context: { default: {} }
-    },
 		components: {
 			HealthBar,
 		},

app/imports/ui/properties/components/attributes/SpellSlotListTile.vue

@@ -65,9 +65,6 @@ export default {
     dark: Boolean,
     hideCastButton: Boolean,
 	},
-  inject: {
-    context: { default: {} }
-  },
 	computed: {
 		currentValue(){
 			return this.value - this.damage;

app/imports/ui/properties/components/inventory/ItemListTile.vue

@@ -17,7 +17,7 @@
     </v-list-tile-content>
     <v-list-tile-action>
       <increment-button
-        v-if="context.creature && model.showIncrement"
+        v-if="context.creatureId && model.showIncrement"
         icon
         flat
         color="primary"

app/imports/ui/properties/viewers/ActionViewer.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="layout row align-center justify-space-around">
       <v-btn
-        v-if="context.creature"
+        v-if="context.creatureId"
         flat
         outline
         style="font-size: 18px;"
@@ -47,7 +47,7 @@
       </div>
       <div v-if="model.uses">
         <span
-          v-if="context.creature"
+          v-if="context.creatureId"
           class="uses mx-2"
         >
           {{ usesLeft }}/{{ model.usesResult }} uses
@@ -65,7 +65,7 @@
           {{ reset }}
         </span>
         <v-btn
-          v-if="context.creature"
+          v-if="context.creatureId"
           outline
           color="primary"
           :disabled="!model.usesUsed || !context.editPermission"

app/imports/ui/properties/viewers/AttributeViewer.vue

@@ -44,7 +44,7 @@
     />
 
     <effect-viewer
-      v-if="context.creature && model.baseValueCalculation"
+      v-if="context.creatureId && model.baseValueCalculation"
       :model="{
         name: 'Base value',
         result: model.baseValue,
@@ -89,8 +89,8 @@
 		},
     meteor: {
       effects(){
-        if (this.context.creature){
+        if (this.context.creatureId){
-          let creatureId = this.context.creature._id;
+          let creatureId = this.context.creatureId;
           return CreatureProperties.find({
             'ancestors.id': creatureId,
             'stats': this.model.variableName,

app/imports/ui/properties/viewers/ItemViewer.vue

@@ -9,7 +9,7 @@
         {{ model.quantity }}
       </div>
       <increment-button
-        v-if="context.creature && model.showIncrement"
+        v-if="context.creatureId && model.showIncrement"
         icon
         large
         outline

app/imports/ui/properties/viewers/SkillViewer.vue

@@ -40,7 +40,7 @@
     />
 
     <effect-viewer
-      v-if="context.creature && model.baseValue"
+      v-if="context.creatureId && model.baseValue"
       :model="{
         name: 'Base value',
         result: model.baseValue,
@@ -96,8 +96,8 @@ export default {
   },
   meteor: {
     effects(){
-      if (this.context.creature){
+      if (this.context.creatureId){
-        let creatureId = this.context.creature._id;
+        let creatureId = this.context.creatureId;
         return CreatureProperties.find({
           'ancestors.id': creatureId,
           stats: this.model.variableName,